CSS 样式是边框最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。3 o0 a: \4 r2 n! j' z! a2 |8 l
以下各特效用的HTML代码相同：9 r, N% H) N! O$ X# s, V* M5 r
<div id="box">
编程适合那些有不同想法的人... <br/>
对于那些想要创造大事物并愿意改变世界的人们。
</div>
5 z0 E* `1 y0 E+ r
1. CSS动画边框
/ l, k- N; T6 H7 BCSS代码：
3 C. I$ w0 J* k5 _5 \! q3 l* i. L@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;
}
效果如下：
( v5 c9 Q4 @; S- r. }
9 ^7 a+ ?3 a+ g: J
5 `& d! ^. |7 {( \ [2. CSS图像边框
3 H' V, z2 B& Z0 `CSS代码：$ X, q! ^4 d @/ z) X
#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;
}
效果如下：
1 y1 [" o# H3 x$ E& E8 J
$ O; S7 Z/ k/ R7 K% G3 h
3 ], I2 e$ ?" ]4 v0 [2 l
3.CSS蛇式边框
( R: y% s4 w# F# K: ^' C$ Q1 p1 HCSS代码：2 ]! ~- m- k- E2 ~: Q' 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;
}
效果如下：
$ G1 C# |' H& U3 g$ Z
" k0 k0 I" F, v% T
4 ~6 [8 l* k* s, T0 H4.CSS阶梯样式边框5 b7 o* r5 z8 J# B1 _) r, Y) D2 `
CSS代码：8 V& i! h$ F5 Y7 w# J8 i, X! q2 R; 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
}
效果如下：
3 ~1 c) k0 o7 v" l2 z3 {
2 W. e7 X0 R2 W% }6 I3 X6 ]
) H! D# g- m. ?& k( U/ I, I5.CSS只有阴影边框: n' M6 L: s$ I( x
CSS代码： Q7 l1 Y- t, p- I
#box {
font-family: Arial;
font-size: 18px;
line-height: 30px;
font-weight: bold;
color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 00010px white;
}
效果如下：# A" v0 e Q& }- G
2 P3 k$ l( A( Y# S$ ~/ i, S
0 W% j W) |; n* f$ |; {. U6.CSS带阴影和轮廓的边框3 v5 v+ c) }' \
CSS代码：
& c, d+ U4 E, A$ N) `+ w& B#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;
}
效果如下：/ J P$ v- d7 z2 @
1 t& v% D7 p4 g8 ^% Y4 P: @
$ j) \. m% Q! }! O3 C7 _( ?7.CSS少量阴影和轮廓的边框
: r- ~; F8 j( W. Y/ I- o) _CSS代码：
' L2 v) M; E. m; C#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;
}
效果如下：! X1 d3 p( B: `5 v- w
4 a' l0 P% S9 B) S X8 Q2 K% U0 r2 m6 [! Z% f8 _$ V1 s9 X( O
8.CSS带有阴影的双边框
7 x0 t8 {" A2 ^; pCSS代码：8 J3 z9 }+ x; l* v7 K
#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;
}
效果如下：
: ?$ v4 q4 U& ?$ n. h# \7 e% l
! Z9 q* Z6 @$ R5 S/ d0 Z2 r% n' a- c- l- Y
9.CSS多色边框
( S- w2 [, w2 x. p m( yCSS代码：
; R: J t( P# U#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;
}
效果如下：
; i. Y1 @- b* m3 u7 C- ` n( i
| 
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2020-7-6 13:32:58