CSS 样式是边框最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。& J, T4 t( c7 @' _6 T 以下各特效用的HTML代码相同：( V7 }+ |8 R8 l% m4 U6 X) W( | <div id="box">
编程适合那些有不同想法的人... <br/>
对于那些想要创造大事物并愿意改变世界的人们。
</div>* q8 J* Y. ^- R 1. CSS动画边框 # e. |( f. \9 X6 C/ u) W/ ^2 } % r+ z" b1 x5 t4 c: }: I' p, E, f @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;
}$ N c1 E# ^+ F) n& t
$ t2 n8 g# F' u8 L3 m* z 4 \& |1 R* v3 f- Y5 ^* ^3 \* X 2. CSS图像边框 ' K: Z( X- N8 n7 U1 N: u7 N7 X0 @ 9 E* Y( H+ l' Y* U #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;
}" |" Z+ @. P2 h
* z8 J9 X8 z+ ]9 A! O1 I; r" G $ D' O5 n4 i$ T! a; O8 A 3.CSS蛇式边框 $ T! \- ?) J( ` CSS代码：( M' |# ~! Y! y6 d% A #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;
}, X% ^, S4 p: ~+ J6 J/ y
; W! T# S& V& N: k0 z : E+ d* A* ^% S: |* d- i2 D 4.CSS阶梯样式边框 3 C/ g$ Q8 K+ H, Z$ M ; u' D, }% p) Y0 o( V2 U/ D #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
}4 V0 ?& p* u( @$ v6 ]7 N, `! X
: B4 h. ]: u' B, E7 v) c4 k8 K % l+ r" Q9 ]# a' |( n 5.CSS只有阴影边框 $ i: A) ?' i/ v. g# `$ Y t$ T' m' L X) u. H) Z #box {
font-family: Arial;
font-size: 18px;
line-height: 30px;
font-weight: bold;
color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 00010px white;
}$ ]5 O- V) A, K
( R7 g3 [1 }* b8 z: w4 R3 i& b ( x$ b/ @$ D9 e+ `5 ~( N 6.CSS带阴影和轮廓的边框 1 b5 T' h( g* K6 d/ J+ u. n# y + e9 m2 q7 Q9 j+ L' W! 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;
}( e: `# L/ |2 W( W: O, z& r0 K
5 ~- c; J* @" C0 r& s2 [ 0 x5 g" Z; E+ i1 ^* R2 R% @* c 7.CSS少量阴影和轮廓的边框 9 i; H! `3 [: n8 x) [# i $ {" [6 f: R3 v" B6 X2 x #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;
}% x. E2 n( D% h7 A4 k( s
/ }! S! W/ i* b4 Z4 F" e , T) h. g, I3 U/ |9 M/ Q% J 8.CSS带有阴影的双边框 * C/ g. s) R, p* E# ? CSS代码：3 w1 O f! m( V 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;
}' e' t. A, T# i) u( D
7 x/ W/ u+ C" ]& w) ^1 W $ R+ @+ G3 c( A' p 9.CSS多色边框 & _% H0 a# R9 c3 y0 R( Z . Z* G* B* \8 |+ g" {) F( _, M1 y3 T #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;
}! Q7 T# B0 e! f
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2020-7-6 13:32:58
