CSS 样式是边框最重要的一个方面,这不是因为样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有样式,将根本没有边框。
' a% W7 v- ]9 A7 G 以下各特效用的HTML代码相同:& D) Q; S0 B" I* {4 q
<div id="box">
编程适合那些有不同想法的人... <br/>
对于那些想要创造大事物并愿意改变世界的人们。
</div>
9 Q& @ P: N& v- }: M# E: L% S1. CSS动画边框% H$ H1 o5 a. t I A
CSS代码:2 { J, J& }; ?& N, k
@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;
} 效果如下:
! `2 \+ G+ z3 i7 t, ]; F
/ r6 u( R0 a/ i7 _7 G4 N* v' G. F, l
2. CSS图像边框2 \, k8 D" V' ~7 T8 E
CSS代码:
& d7 Z* b$ l) v) p- F#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;
} 效果如下:/ t# g* n. a$ Z8 q3 @3 j
' e, j" N$ d) d+ `' m' P2 l9 Q4 y
$ c% X" P" F$ m+ b
3.CSS蛇式边框
! K I. @' |' z1 {# {) YCSS代码:3 P4 S* o- r& U% @2 W8 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;
} 效果如下:% m4 ^& n- v, e. N( X) n9 H+ q
1 z7 W, I$ i& O2 }" |: Z( g
4 I6 `- B, V! d4 o& ?4.CSS阶梯样式边框
8 j: d7 D$ L+ p' V, o+ RCSS代码:6 c$ F4 ~" e. c+ I; f e/ 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 ` ?9 s' I+ ]# D* }$ K* M' g3 {
7 |3 D. O4 {4 n7 c. x6 x
' z2 f) H- F2 p) x }, t5.CSS只有阴影边框" q/ \/ `$ p' C0 N9 i: _; }0 o! ^
CSS代码:! ~! e o/ H+ d. E, I! v
#box {
font-family: Arial;
font-size: 18px;
line-height: 30px;
font-weight: bold;
color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 00010px white;
} 效果如下:
% y5 s8 m3 e2 F
3 ]+ B! J9 Q# R- ?2 u! ]( N, U; Y% ^6 C
6.CSS带阴影和轮廓的边框. d! W6 M4 N) [3 \3 B: x
CSS代码:
' D: s$ g5 m1 K8 H2 @+ `! O#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;
} 效果如下:
% x) Y$ |$ g) f) N
! \- g( r* n/ Z9 P
( N: K' n% t' W" K* r7.CSS少量阴影和轮廓的边框 p4 E- ~4 O4 Z1 m! p
CSS代码:
) p5 C5 H, l( N# R, J#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# B& W1 v! Q
; d; b! v" R1 R7 S
# y$ a4 _/ l, x. `8 Z& j( Y8.CSS带有阴影的双边框$ K7 d6 C* X( \& ]1 h u' C
CSS代码:
2 t) K; W% ?/ `; A* T) D#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;
} 效果如下:
" Z. O4 k/ j2 g. J- u B0 Q* X' b
5 f4 z' W" O1 i6 m1 y7 _# s" V( G
' M+ \( H h) @& w9.CSS多色边框9 ^# V- A3 {& P& e
CSS代码:
; P. m& i, y/ X#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;
} 效果如下:
+ ~; ]7 ~1 d6 q+ r- _% Q
|