CSS 样式是边框最重要的一个方面,这不是因为样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有样式,将根本没有边框。 b5 t2 G7 K ~, l
以下各特效用的HTML代码相同:
W6 E8 X( T( a/ E/ Z! |<div id="box">
编程适合那些有不同想法的人... <br/>
对于那些想要创造大事物并愿意改变世界的人们。
</div> ) i) ~3 t; S* P8 k* F& U
1. CSS动画边框# e% Q5 ^) w+ E6 I8 L
CSS代码:8 e& {. f% U& M! K7 O% H
@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;
} 效果如下:, C1 s1 I, a: Y0 M) B z
8 _3 B# O8 w2 B$ A" l0 L! x# w
7 u5 v2 d9 E! I. ^1 h2. CSS图像边框
5 y, D6 j% M. D" r8 Z2 g( q1 P& qCSS代码:2 S5 o# J2 `+ n
#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;
} 效果如下:8 V! J/ D- v" f
. y4 v% p& u+ M' r
) L6 o9 @: [1 Q( F3.CSS蛇式边框
% a! V) O4 `+ H/ \CSS代码:
/ h! F" s; R) w, R5 Q+ R* V- f#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;
} 效果如下:' e3 M9 W: e7 P! ?( o) Y
) o9 o b9 t4 M2 t1 d9 F
4 Y' }" }* U) _! C4 T# k
4.CSS阶梯样式边框& A: |. X0 n+ o
CSS代码:* A* c* C8 Q! Y8 I S9 v" G% F
#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
} 效果如下:
0 \( q' {+ i) z1 Q! u: Y. n1 m
" j6 t$ z8 g+ V2 \/ k
0 {/ ?2 l5 ]8 {% @ G. w9 i( _
5.CSS只有阴影边框
S( z& n7 P4 F+ bCSS代码:4 d; e* K1 e3 C2 u) D! a5 ^
#box {
font-family: Arial;
font-size: 18px;
line-height: 30px;
font-weight: bold;
color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 00010px white;
} 效果如下:
/ X8 q* j1 v+ C( m$ N( x" ?( G$ R
4 ^: a- K3 H' G, H
% k* a- [: E! U; t; n6.CSS带阴影和轮廓的边框: F& w2 @9 c/ m0 {1 n
CSS代码:4 Q/ E" J5 I7 t% p5 W+ P5 ?" _6 o9 T
#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;
} 效果如下:7 }% B" M$ y/ w% G. z' q
& E- S" b9 P5 j# s& g7 W
) H7 z& H/ V8 s) S
7.CSS少量阴影和轮廓的边框% Z* B3 J' }' L3 ^0 i
CSS代码:* U2 L1 ^$ L/ J9 Z* k$ m
#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;
} 效果如下:, b, f8 w' O' u0 U4 ~1 x) m8 q1 @
; ^1 u3 u: L1 [$ P8 _: E. [8 |1 a- f# r5 d
8.CSS带有阴影的双边框4 h/ L; W' p( Y( z4 q
CSS代码:( J1 A! ?- W* s* y+ W) ?
#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;
} 效果如下:
! P7 M' P% w0 |
0 U8 `' d( k' G
3 h/ K4 ? D7 P$ J4 i# k0 w3 p
9.CSS多色边框. v7 K) \& {& s% `9 _ [/ G% m( U
CSS代码:; ~% K2 O; [$ F5 H4 @
#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;
} 效果如下:8 y, i( ]# J# B) k$ a
|