CSS 样式是边框最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。( ]; L& ]3 C3 C9 y; {) P
以下各特效用的HTML代码相同：
# m+ m5 m; I' h9 ]) z<div id="box">
编程适合那些有不同想法的人... <br/>
对于那些想要创造大事物并愿意改变世界的人们。
</div>
! x1 h9 q; D4 q ~: y
1. CSS动画边框
X6 H/ R" u9 e/ n) [CSS代码：5 H. w; O0 O- @, K# g
@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;
}
效果如下：9 H9 k% Z4 Y/ b
0 f# J2 w2 d' C
4 |+ l* B0 {/ q% C, c' m2. CSS图像边框
1 X- V) N6 m$ U7 iCSS代码：
' r2 F( [/ T" l2 }" V#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;
}
效果如下：
- I; t& Q( |1 I1 g
5 U5 @& Q% ^: Z5 c( Q8 q# c4 A A4 W- C o# P# G
3.CSS蛇式边框8 [5 i3 `- L$ x' {) C& P* P0 e
CSS代码：6 e/ i( Q; U, [" N0 O2 b
#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;
}
效果如下：
8 M1 r) W3 |4 ] O% R
8 T/ s1 Q9 G9 q: t
- ~7 i6 b0 _8 {, P" r
4.CSS阶梯样式边框# o% h0 }2 t4 K* f
CSS代码：
. E7 U: C1 R9 s. b4 |#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
}
效果如下：: L& k1 |1 d8 S2 `7 _
* F' @' `7 E, _- w+ _5 ~' y7 X6 m
C# j5 C5 y( ~5 O/ `+ @1 c: ?* v5.CSS只有阴影边框
! N8 a) X$ ^8 i+ [CSS代码：
/ B' H: a! c. ^+ Y/ N7 F- S#box {
font-family: Arial;
font-size: 18px;
line-height: 30px;
font-weight: bold;
color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 00010px white;
}
效果如下：9 I1 _+ \; V. Y+ `6 c( z `% f
7 u1 l: f) M9 E: c; w! N
" I0 _4 E5 Q8 G' ]8 E" n b
6.CSS带阴影和轮廓的边框
* n* v8 L9 ~8 \$ e& _& P% O! q2 KCSS代码：
# p1 a+ d5 v& t% J- n3 v#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;
}
效果如下：
9 l+ N! O8 [' S( S: f9 ~
' P& _% H0 V/ v5 t) L% ^8 K
$ L4 s) K# ~' f7.CSS少量阴影和轮廓的边框4 _& z- Y& r. Y1 p( z# C8 [" j
CSS代码：) e' e* O& q3 @2 A; @) l* 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;
}
效果如下：- \8 A( z, \1 s! i( N) @$ ]# r% ]
- E$ @# R1 Z7 A1 E4 F- [6 H
* D, \$ E3 D4 H) N
8.CSS带有阴影的双边框5 r r" L* [# q9 n0 a2 z- u
CSS代码：
; ]9 T* z) B8 i, {5 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;
}
效果如下：
+ }, V1 d4 J6 n9 ?& w
a( k& o8 {. h& g f
: ^/ V) d1 M( D! a. B1 H5 R; `
9.CSS多色边框
" ]0 t3 H: ^3 v$ h. W$ sCSS代码： l0 Q% ?8 p& E$ Q- D; B
#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;
}
效果如下：
$ L+ ? y5 m& v- J
| 
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2020-7-6 13:32:58