CSS 样式是边框最重要的一个方面,这不是因为样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有样式,将根本没有边框。
5 Z, ~7 S1 a: t: }3 ]% M& A1 W 以下各特效用的HTML代码相同:
2 T! E8 M e% K<div id="box">
编程适合那些有不同想法的人... <br/>
对于那些想要创造大事物并愿意改变世界的人们。
</div>
: u7 O0 W8 C) \1. CSS动画边框
& q' C4 }( e* }( f0 g2 @CSS代码:
- D: h% ~' D$ Z* [' A% m! }@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;
} 效果如下:
5 ^ ?4 k2 t- ~4 y9 P9 `( J
* H; n5 b- s! ~. `8 }1 C/ G" s
1 C4 q, E$ @0 P. X6 o' j2. CSS图像边框
7 ~% m- F$ W/ |# t% @CSS代码:
9 v+ Q/ i# N- e$ q4 {#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;
} 效果如下:
. @0 `0 Z: N- i' X& ~
! f2 i7 Y+ @' i+ _- v5 o
: C; `: |/ G4 }# h- Y. F6 Z
3.CSS蛇式边框
# l6 ]& v% D7 k c( n: [CSS代码:4 w& s1 R1 E) l9 `
#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;
} 效果如下:. ?1 F. N7 i1 c8 N3 j* o v
8 ]2 P; S+ Q+ Z1 _! Z, J
( P0 U: j$ _2 O% W! ~
4.CSS阶梯样式边框
+ i6 P0 U! c( Z' H* J: PCSS代码:* T& w& @ n: Q& Z! M
#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 M2 X2 ^" [! m1 R
# i% g6 ^. I t; p9 p! H! l; W
- P! L2 w3 W, K5 [% T$ p5.CSS只有阴影边框8 ?. L, j- B$ q
CSS代码:
+ c, n6 f; d2 Q" P/ m- {+ r#box {
font-family: Arial;
font-size: 18px;
line-height: 30px;
font-weight: bold;
color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 00010px white;
} 效果如下:
* g9 J7 j6 e8 ~0 {
# _, G5 K2 M. j6 i
# z/ }4 l `& A1 I2 _+ O
6.CSS带阴影和轮廓的边框
. D5 D0 P: O, A1 BCSS代码:
* m, M& s' p% o- S) Q, }#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;
} 效果如下:* i* V$ ^" R+ N+ ?% N! q
7 b6 K( f! E" e3 q
3 s# m4 @2 m# |7.CSS少量阴影和轮廓的边框5 P: w5 l, ^/ x$ f. n4 }) r, e6 V7 }
CSS代码:4 `; G C: \/ l8 Z. ?
#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;
} 效果如下:
& m' H* n% B2 H
6 j- b1 k3 y: `: a/ n6 Y* s" b) u) ~' j) `
8.CSS带有阴影的双边框5 F! M4 S3 C o6 r: }0 C) ]- L
CSS代码:* o" x2 Q* B3 U5 R- B+ R) o$ _
#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;
} 效果如下:! Y8 M, M3 [0 a
9 p0 L5 {. s$ e( ]9 M {
. Y& I3 S" X3 ?1 i! |9.CSS多色边框
8 K) Y8 ?! {5 @0 JCSS代码:
" B/ B' M2 `8 ]6 \#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;
} 效果如下:! m- e/ q6 Y( g% }
|