CSS 样式是边框最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。% P1 y4 }& S* M2 g6 P* {$ ~. F
以下各特效用的HTML代码相同：$ M# C9 \% v1 V& B/ d( _ H: r
<div id="box">
编程适合那些有不同想法的人... <br/>
对于那些想要创造大事物并愿意改变世界的人们。
</div>
2 o8 F2 w* y) f9 [! s$ n
1. CSS动画边框9 R) l! f: V. G F
CSS代码：1 ^( r% X0 w; _! O/ k
@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;
}
效果如下：& o$ G+ \4 n) g7 _
* t$ m, z( J: p, m) ] E8 v7 H9 f( f- r! L4 m4 X
2. CSS图像边框4 F4 Z. y2 J/ [, z% s4 [/ c
CSS代码：+ u2 G* E% k( m7 x
#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;
}
效果如下：
* t, I v- o9 _8 o" S* O9 B X
v9 V; T0 u+ k; C$ s+ a5 q5 b$ S- k$ A4 ~3 X/ Y+ ?- p. ~9 T+ ^
3.CSS蛇式边框
( D' |% \/ P& Q9 h( LCSS代码：( w4 j; B2 p, ]* P; s
#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 t. F x( m) y2 X6 I8 G! T
. {0 y/ a5 B: y' I( z3 ?3 ]. y% C" C( p
4.CSS阶梯样式边框& `. J; R- d8 y
CSS代码：) h4 @( x* M, o; E! B8 E
#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
}
效果如下：9 K: E2 W0 {' i7 G) j9 r, A
* p8 C5 e( x; g4 _" l4 h- ^8 @
- I3 ^8 p! r) _: R5.CSS只有阴影边框% R2 {2 [# F6 i1 U4 p4 `: ?
CSS代码：( b7 |( K6 o) X9 p( S, [5 G7 y* W
#box {
font-family: Arial;
font-size: 18px;
line-height: 30px;
font-weight: bold;
color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 00010px white;
}
效果如下：& n1 l8 v# ^2 |3 |
/ g& [4 Z8 H' h l* v
& U( I( ?! v D
6.CSS带阴影和轮廓的边框
* O3 I y% Y% OCSS代码：9 b( J% u Y# L/ d
#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;
}
效果如下：
/ B/ m2 O' e0 K
! N. V8 z8 f [$ p- C4 T K# D+ S" Z9 H; j1 }- T8 _
7.CSS少量阴影和轮廓的边框' s' d+ F: O K
CSS代码：/ d4 q7 G% h$ o4 @5 G _0 f. {( Y! u
#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;
}
效果如下：* \( I8 w8 M% y! f
) g$ t+ m% s% h4 f3 S, P- b' f; J
& c) @3 r- X, O1 @
8.CSS带有阴影的双边框
f/ S2 r/ j+ k* M! J9 K2 s* |CSS代码：
, R( N7 Y U" c( T" @$ w#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;
}
效果如下：
' d* h% C/ O' H/ W7 d4 }5 X
8 s7 S* O9 v2 c* p2 R T- u
6 Q, u6 r+ n1 s; w3 t4 i* Q9.CSS多色边框
( G1 }2 Y/ J/ r' I; W1 }CSS代码：
0 H6 M7 ^7 T' d' n. }0 ^- v#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;
}
效果如下：
8 J5 B$ G7 @2 O' E; t+ |
| 
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2020-7-6 13:32:58