CSS 样式是边框最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。* @- G9 a* i1 _) M: y
以下各特效用的HTML代码相同：# i6 b" \1 |; X8 N3 `& V6 U: @
<div id="box">
编程适合那些有不同想法的人... <br/>
对于那些想要创造大事物并愿意改变世界的人们。
</div>
* R3 |, @# Z. z/ G1. CSS动画边框) o: i& b! {5 C1 U5 P
CSS代码：
# z5 G# @9 R$ s6 f- U@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;
}
效果如下：
( A0 `7 S) R: k% k
2 x! R# f# }, h( V% ~: O
# c; ~; a. q; s5 |9 {2. CSS图像边框/ l1 C2 l8 Z* {( j# ~/ L
CSS代码：( l- v: T: J6 \, R' x& k4 v" o& 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;
}
效果如下：
: ~9 U- O1 m! b4 T- V1 M: P" K
/ F+ U3 I1 k- ?2 E: D$ D$ u1 d
- ?2 a3 Z" `$ {3 J9 Y6 n# o3.CSS蛇式边框% K6 n, e; W7 [
CSS代码：
) V* |5 E" |( c6 F) P0 X#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;
}
效果如下：
; L# M, ]& s+ _% L' B" I2 t$ `" }/ t# t3 q
7 h+ H, `0 K) V4 q2 o) H* e
3 y/ ~: i# W- {, |+ u' L3 ~
4.CSS阶梯样式边框' k% }+ O: l' T/ P: ?% G1 \
CSS代码：6 T& o' s9 N4 t. g
#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
}
效果如下：4 U" T" [0 r+ L$ M) C) E
5 Q; |& I: ~1 \. y; G+ \; p; d
# o9 \* c6 }0 l, k5.CSS只有阴影边框
) j# D# o7 p/ I% @ U. C; fCSS代码：) C0 E, R8 k- \! F
#box {
font-family: Arial;
font-size: 18px;
line-height: 30px;
font-weight: bold;
color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 00010px white;
}
效果如下：( h# o4 ]: J. a' Z- z* @
- q. `% T; d5 j) z
) |& [. M: p0 B; L
6.CSS带阴影和轮廓的边框
* f6 a# x/ U$ m( i/ r3 V5 eCSS代码：& `! `2 Z- v0 J& @/ U
#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 L0 ~* {1 o: N0 Y e
# t; D1 v6 ^' ], l7 C: J- E9 q% j( E* X; X1 K- J6 c
7.CSS少量阴影和轮廓的边框
5 Y4 p4 J2 z, c3 jCSS代码：: b8 X) l+ |; l: ^
#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;
}
效果如下：
; I6 u+ B m7 e4 O$ W; J0 i
- t/ o J' G1 {/ f& c$ e: P" t @
5 m6 y8 z; V2 o* N% Q
8.CSS带有阴影的双边框) p$ F; v: S( J6 w9 z9 b; O8 @+ y
CSS代码：9 T+ |/ p) h; K: U8 z' C
#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;
}
效果如下：& w$ W1 c8 `" c' y' b4 [
: k, C: X" M* E8 T' j2 a' l6 w- z# g1 B! q0 H# j
9.CSS多色边框
- Z1 y: G* \- e/ h4 |2 @CSS代码：9 @+ H5 @3 k7 T) e; i% ~7 m
#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;
}
效果如下：
1 `+ F6 u& {! D2 z) s
| 
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2020-7-6 13:32:58