几个非常绚丽的CSS样式边框特效代码

admin

       CSS 样式是边框最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。
       以下各特效用的HTML代码相同：
+ \7 t0 |: E1 M

复制代码
<div id="box">
  编程适合那些有不同想法的人... <br/>
  对于那些想要创造大事物并愿意改变世界的人们。
</div>

% V+ F& m% q5 c1. CSS动画边框
+ p( o% d" ^7 Y6 W) eCSS代码：
& J! s, I: h8 R3 W

复制代码
@keyframes animated-border {
  0% {
    box-shadow: 0000rgba(255,255,255,0.4);
  }
  100% {
     box-shadow: 00020pxrgba(255,255,255,0);
  }
}
#box {
  animation: animated-border 1.5s infinite;
  font-family: Arial;
  font-size: 18px;
  line-height: 30px;
  font-weight: bold;
  color: white;
  border: 2px solid;
  border-radius: 10px;
  padding: 15px;
}

效果如下：

, s; Q2 C/ _) a8 z$ ?, T* b6 O: p
; B2 o$ R% I. y5 d- o2. CSS图像边框
CSS代码：
" z$ m6 P5 W4 @

复制代码
#box {
    font-family: Arial;
    font-size: 18px;
    line-height: 30px;
    font-weight: bold;
    color: white;
    border: 40px solid transparent;
    border-image: url(https://image.flaticon.com/icons/svg/648/648787.svg);
    border-image-slice: 100%;
    border-image-width: 60px;
    padding: 15px;
}

效果如下：
' v0 u( z8 L4 W* e

) W' _- a6 ]1 r3.CSS蛇式边框
2 |1 }/ ^+ r% x3 I. dCSS代码：
2 L5 X$ J3 a, h

复制代码
#box {
  font-family: Arial;
    font-size: 18px;
    line-height: 30px;
    font-weight: bold;
    color: white;
    padding: 15px;
    border: 10px dashed #FF5722;
    background:
    linear-gradient(to top, green, 10px, transparent 10px),
    linear-gradient(to right, green, 10px, transparent 10px),
    linear-gradient(to bottom, green, 10px, transparent 10px),
    linear-gradient(to left, green, 10px, transparent 10px);
    background-origin: border-box;
}

效果如下：
0 E+ u1 c: z) e2 z5 z
9 U1 E6 q# R( \' k" r' I
. u  j/ V3 E9 o9 H4.CSS阶梯样式边框
6 G% w, c, ?2 o! Q/ PCSS代码：
4 e% X. Y( t: ?$ g; d6 M+ X8 h

复制代码
#box {
  font-family: Arial;
    font-size: 18px;
    line-height: 30px;
    font-weight: bold;
    color: white;
    padding: 40px;
    box-shadow:
  inset #0096880005px,
      inset #059c8e0001px,
      inset #0cab9c00010px,
      inset #1fbdae00011px,
      inset #8ce9ff00016px,
      inset #48e4d600017px,
      inset #e5f9f700021px,
      inset #bfecf700022px
}

效果如下：
8 Q4 O, e. R$ u4 |

1 n* l# O3 e: _# H" M* U$ D5.CSS只有阴影边框
  t, c2 ~% V2 @: i: h1 S- V' DCSS代码：

复制代码
#box {
  font-family: Arial;
    font-size: 18px;
    line-height: 30px;
    font-weight: bold;
    color: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 00010px white;
}

效果如下：


" E3 I2 O* M, [6.CSS带阴影和轮廓的边框
! s6 h& F  H* ICSS代码：
8 d6 X; o* i( o

复制代码
#box {
  font-family: Arial;
    font-size: 18px;
    line-height: 30px;
    font-weight: bold;
    color: white;
    padding: 40px;
    box-shadow: 00010px white;
    outline: dashed 10px#009688;
}

效果如下：
0 h4 J. f0 L# y8 W& |3 K5 k
3 R% e3 c& c' C+ _) @$ @
7.CSS少量阴影和轮廓的边框
: q$ z9 H5 _# Q* h3 p" p' @8 QCSS代码：
3 C- k1 ?. K6 _$ ^

复制代码
#box {
  font-family: Arial;
    font-size: 18px;
    line-height: 30px;
    font-weight: bold;
    color: white;
    padding: 40px;
    box-shadow:
      0001px#009688,
      0005px#F44336,
      0009px#673AB7,
      00010px#009688;
    outline: dashed 10px#009688;
}

效果如下：


! z! f1 E: Q0 h' E8.CSS带有阴影的双边框
) @& N8 V; ]! Y2 d* C6 V+ `CSS代码：

复制代码
#box {
  font-family: Arial;
    font-size: 18px;
    line-height: 30px;
    font-weight: bold;
    color: white;
    padding: 40px;
    box-shadow: 00010px#009688;
    border: 10px solid #009688;
    outline: dashed 10px white;
}

效果如下：
& I; D0 n, z3 Z5 _# R  U6 a7 [: ?) j
" H  D$ {, ?, n( Y5 P
, \9 V# _5 I7 y- f5 z* _+ v* \9.CSS多色边框
" G6 I" r0 V) u+ C6 {9 RCSS代码：

复制代码
#box {
  font-family: Arial;
    font-size: 18px;
    line-height: 30px;
    font-weight: bold;
    color: white;
    padding: 40px;
    background:
      linear-gradient(to top, #4caf50, #4caf50 10px, transparent 10px),
      linear-gradient(to right, #c1ef8c, #c1ef8c 10px, transparent 10px),
      linear-gradient(to bottom, #8bc34a, #8bc34a 10px, transparent 10px),
      linear-gradient(to left, #009688, #00968810px, transparent 10px);
  background-origin: border-box;
}

效果如下：
5 M; W: z2 y' D, r  b' [! T