CSS 样式是边框最重要的一个方面,这不是因为样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有样式,将根本没有边框。
) z( O& o2 M( H+ Q, v 以下各特效用的HTML代码相同:
0 l1 Q; m1 m2 J( h6 u<div id="box">
编程适合那些有不同想法的人... <br/>
对于那些想要创造大事物并愿意改变世界的人们。
</div> 6 r1 M9 i8 J. A" N* i6 J( w* |
1. CSS动画边框
/ E# R# \% q9 z ICSS代码:# R1 U+ J0 g( h: c, ?! p
@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;
} 效果如下:
* y ~1 ?* B* r! N2 h: ]
" { |1 i& w7 O8 o$ r0 U; c0 q" i; u5 B
3 W5 q" N7 e) y5 k$ p
2. CSS图像边框$ e9 d$ Y, G7 _6 F& \
CSS代码:
5 z1 s4 j% `# J#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;
} 效果如下:
( U5 Q+ ?: h1 l6 }/ j# S
% C2 O' e5 Q2 _( q' V4 b8 {/ {% r" \) d
3.CSS蛇式边框
4 M. d9 t! N1 N _1 W1 F2 ~% vCSS代码:) t# F6 Z" g6 u$ G" Y
#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 u7 o1 _. w* k5 H8 s
9 ^9 S. U- N( ^; a. ]# s
; Q- I. K" U' z1 Q4.CSS阶梯样式边框/ @$ H/ X% n+ o# w) E7 E2 r
CSS代码:9 C. m) n- V4 \6 N6 Q
#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
} 效果如下:
1 t% W8 N/ |2 j. O; Q% R, E
' Q7 \0 `# h4 @: Z0 X* C
( z; P" }3 e) I6 h, ~
5.CSS只有阴影边框
- i/ z2 \2 P4 L3 `* p, S! ?CSS代码:
) D2 F6 L2 v" H5 i5 k. Q' @#box {
font-family: Arial;
font-size: 18px;
line-height: 30px;
font-weight: bold;
color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 00010px white;
} 效果如下:1 v$ V! c3 y3 x
( m7 p8 ?4 i" R# n! V3 `
4 t6 x/ w- {8 ~' Y2 y: {6.CSS带阴影和轮廓的边框1 Z1 ?% h3 T6 t& o" r7 P& Y v
CSS代码:2 z6 s$ T& Z$ t2 \
#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;
} 效果如下:; m4 x V& T% W4 r- N# f
0 o' k$ i# I: B
0 P% H+ {" U2 L. n m3 z
7.CSS少量阴影和轮廓的边框 o: L" F9 n3 J4 _+ `, {. O$ t! e
CSS代码:
2 E& X$ q6 l3 v9 a3 Q#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;
} 效果如下:( U. x. F% c! y7 T8 v
8 C# B% z0 V" G' V/ w$ B& L
: J7 `, e- x6 A& I/ q A7 \9 z
8.CSS带有阴影的双边框/ ?6 X% D. Q5 o
CSS代码:6 n% S9 P0 A ^+ Y
#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;
} 效果如下:1 U: t9 {* P3 A: v1 q: Y: p, m
. A0 V+ t% N" ]: Y+ N
$ ?% {( Q9 u8 l3 k* w' t
9.CSS多色边框/ H( T m( D3 D
CSS代码:9 F8 H$ K; J6 l' {
#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 Q) N. [, y4 r4 {1 [
|