CSS 样式是边框最重要的一个方面,这不是因为样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有样式,将根本没有边框。
, f4 C+ I' v' W9 d3 o+ t 以下各特效用的HTML代码相同:
3 M: K1 E$ c$ `( e5 P( X<div id="box">
编程适合那些有不同想法的人... <br/>
对于那些想要创造大事物并愿意改变世界的人们。
</div>
0 _1 w5 U4 N. [ y" h1. CSS动画边框
4 A* e) f2 d0 q' S% mCSS代码:
9 D0 f/ T( u2 z$ b@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;
} 效果如下:. k, G8 i; B* }* ]
5 D/ q% I$ M7 G r9 [! |: ]1 q0 L @
8 Q' v- M! }) X/ k
2. CSS图像边框
( _7 T! {$ ~. L1 HCSS代码:$ l0 b1 N; n! ~! B
#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;
} 效果如下:- u0 F5 O* E$ m% r8 O
, A: E6 t' F5 Y# |* K) H2 W( a" J a
: \3 _7 E: r7 X" ?0 W0 R3.CSS蛇式边框
" B$ X: x9 g3 E' {' \1 J6 fCSS代码:
J* {+ d( z; b#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;
} 效果如下:
+ w* v+ L. L" t( Y1 \ @/ S+ z
9 }: c9 L. N4 A0 J2 ^% t6 o: s" f2 Z2 q( @$ K$ K
4.CSS阶梯样式边框' k& o, p1 a& L6 S: L. L0 s% h
CSS代码:& e+ ~& \1 ^% m- m' c
#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
} 效果如下:- s8 K$ ^4 O7 Q' X/ [( X- x
* y. j O* D. C
) w: M0 U5 d9 R5.CSS只有阴影边框0 V. Y s- A X
CSS代码:
# d+ a% ^- g4 A/ B+ W# O% e5 u#box {
font-family: Arial;
font-size: 18px;
line-height: 30px;
font-weight: bold;
color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 00010px white;
} 效果如下:
7 u) P, W# X2 Q2 E
. V+ o1 i' [! Y8 J) f3 l. e2 z0 Z
& J' o; M' o) d- H7 J7 c: Y$ m6.CSS带阴影和轮廓的边框9 g6 K0 Y6 X9 I" I- G
CSS代码:* o6 e; l0 M, x0 X; q: I1 g
#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;
} 效果如下:
" w) |4 i# @1 c* G- W9 l' m" f; z
( M2 j9 m& `3 t% v5 l+ O
9 d5 p3 @3 z; I! j2 X7.CSS少量阴影和轮廓的边框
5 @+ z) ^, v2 ]* Y O! j! y+ x4 M1 pCSS代码:$ v& T) @2 c c( P8 h4 @, p( T
#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;
} 效果如下:9 H% a6 g) T1 H- ~
7 u! n& a: h& P/ K/ T
/ ~ d( N/ g9 s& s5 y( P5 f
8.CSS带有阴影的双边框& D P+ H) I2 ]: S" k3 x) I! o: W
CSS代码:. D* w" ]0 r/ f: h; L
#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;
} 效果如下:
1 c5 H% Z) F: r$ |# B/ Q
: ^- K1 ]$ X" k0 l. o' Y8 {" i* S
7 N/ }; K1 \* k; f0 o4 l9.CSS多色边框1 u2 Z8 ?( J7 W. [: P
CSS代码:
) g) J# R7 O( w' J( O9 l! R- }#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;
} 效果如下:
, Q6 d* f" m9 {; ]0 A Z( ^
|