CSS 样式是边框最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。
8 A) U& N9 k& u; b( [& | 以下各特效用的HTML代码相同：9 R; G) i" b# a5 ~7 X9 l$ w |! N' S
<div id="box">
编程适合那些有不同想法的人... <br/>
对于那些想要创造大事物并愿意改变世界的人们。
</div>
; Z' V" e4 q3 E: b5 |* S1 O
1. CSS动画边框4 [& z0 }/ s2 _. N% L4 l3 P
CSS代码：
% t5 f' O. A% I" t5 Y@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;
}
效果如下：
- t I- p O. M+ y+ a. V
! u. v, |( n1 m: I! H" b6 c! o: D- i. F( L% R/ i
2. CSS图像边框( p x! e" c& u1 D2 l
CSS代码：
! K9 w# J: @6 s$ e#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;
}
效果如下：
4 W: M/ Z; l. R' S3 ]) I/ C
5 ]4 |- M5 ?, g( c' C0 {( n+ N8 p D/ F! `
3.CSS蛇式边框
; Q9 S: F1 @4 y( R" c" s# W: v6 ZCSS代码：: J1 J$ V1 A6 o! v/ \3 i4 K
#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;
}
效果如下：
, i% ]* ~5 t9 Y. q2 ^
H k* N; f5 Y4 a/ A- v
1 N* Q( T! m' X; n7 F) Q4.CSS阶梯样式边框# S1 U5 e) h* @) G! }$ Y6 P
CSS代码：
G/ @. J* i) d. A#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
}
效果如下：
m$ d! D. k0 s+ N$ _+ [
, F, f+ }, n1 S) d
! G1 Y0 }+ c1 D) G g: y# l) o5.CSS只有阴影边框
5 y% g. ] f/ n7 \% o% gCSS代码：
$ H, u$ i$ I# z/ Q9 u* f- R) Q8 k#box {
font-family: Arial;
font-size: 18px;
line-height: 30px;
font-weight: bold;
color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 00010px white;
}
效果如下：
, k, Q4 W7 F9 w! c
# o/ l7 X# P1 ^& m! p/ t( ?: S
) ^, I9 Y( u7 A4 |7 Y+ R# A) {6.CSS带阴影和轮廓的边框
5 f* }0 @- L# Y4 A1 H, T$ ?CSS代码：9 R4 Y* j' Z( Y: C
#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;
}
效果如下：
/ }. N! C. r9 m* T+ e% {5 Y
/ N8 {4 I8 v F0 L) i8 g! P K
}+ B& ~$ ^. H- \) z% q7.CSS少量阴影和轮廓的边框6 u& O: q0 N0 x
CSS代码：- @, C9 q) i/ [0 i5 E6 p
#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;
}
效果如下：
+ o. ~) Z/ u: m: K2 I; ~# Z h! N( C
( p/ O# W8 p; I; p8 b& S
9 M9 s- ?. S) Q+ E5 s' A8.CSS带有阴影的双边框6 k, \/ F3 L1 t3 u5 G+ @' E
CSS代码：' U& u: L3 t* Q4 [$ w! Z
#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 m- M6 I; t- J
. [- }( c' K3 ]) E
1 G" d$ n) q- U" `+ z& k& W9.CSS多色边框3 Y5 u0 f, }' x; t1 `& S7 t
CSS代码：
& X2 i% V) D# d#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$ D8 w# V/ N8 x* U6 Y* ?4 t9 F
| 
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2020-7-6 13:32:58