CSS 样式是边框最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。
& u* `4 T" Y$ u2 u2 ~ 以下各特效用的HTML代码相同：
y n( g9 A% e! A* O- b<div id="box">
编程适合那些有不同想法的人... <br/>
对于那些想要创造大事物并愿意改变世界的人们。
</div>
6 w/ H. ?. ^3 _1. CSS动画边框
2 u# ~ d; o1 F" ^! H% k" L Z4 W( e8 ACSS代码：# T7 g: y4 i4 h( K, w7 q
@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;
}
效果如下：
7 p4 k$ Y4 N( u! [
; s0 N, b# A K }# ^" y+ a
, x5 {, Y; P3 y+ p# Y) N2. CSS图像边框) j$ e- e% e& |1 V0 U4 [ H; t
CSS代码：1 V0 X3 n' t% q3 r0 v% n
#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;
}
效果如下：( c8 z" O1 M1 U* {4 i3 W' o/ Q
2 L4 ?8 \. f j7 R0 S" d; L' N w' c
" J$ I$ V2 Z% S' D) A' k/ t3.CSS蛇式边框
/ ]5 h7 q' q3 [- p7 B' UCSS代码：
' j0 p# M. I, `- V; n#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;
}
效果如下：6 c* X1 X( e3 r' z/ W! d8 A5 W' S
1 e0 M; t9 D7 Y8 ^( e, {' I# D3 ]$ }2 o5 t
4.CSS阶梯样式边框8 c8 P8 S# }0 N
CSS代码：
4 G8 e/ [. c* p/ V#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
}
效果如下：" z) q p7 h3 E4 v( D, J
( Y9 z. k- G. i9 h% [* M) \
9 g! ~5 Z) c3 ~
5.CSS只有阴影边框) w D8 z f$ M) [7 `* {6 m
CSS代码：
' Y+ y4 x3 L. ]6 J( s9 _#box {
font-family: Arial;
font-size: 18px;
line-height: 30px;
font-weight: bold;
color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 00010px white;
}
效果如下：
" D2 G e& o8 p' f
) I' Z& L0 G1 {1 w: ]1 Q+ S) x k
; t! X+ a" G8 @% y" m6.CSS带阴影和轮廓的边框
7 _- n2 b1 O% I; W: {% _CSS代码：
0 y7 }/ T* D5 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;
}
效果如下：
0 Q! S! s, Z# [$ b+ p" p. Y: ^
. S% `8 r# i# T1 p5 p5 t
& V0 e/ x- K( w1 j# r7.CSS少量阴影和轮廓的边框' D% X% u3 P5 ^5 h: N3 P5 x8 z }
CSS代码：( i9 c/ m& t' B' X2 N3 E
#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;
}
效果如下：
9 @. N4 g% @* n/ W; ]$ Q
1 o7 j2 y/ Z* K
# G( G9 Y" U5 |" `( ]+ g# H8.CSS带有阴影的双边框5 j/ u) T5 ~1 f8 B- o/ O
CSS代码：
) `" |( L$ t- O, j6 d9 J( n4 ^#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;
}
效果如下：
! ?4 @) [$ D! i# O: y8 A
( G1 P' j a# F! W C( T/ e( ^1 Y- ~ c1 b. _5 |$ |+ Z1 F8 `
9.CSS多色边框
1 L* ?. @% W$ d3 E1 b' NCSS代码：
/ { }& E [0 {#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;
}
效果如下：
2 y; I1 B9 a h+ z
| 
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2020-7-6 13:32:58