CSS 样式是边框最重要的一个方面,这不是因为样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有样式,将根本没有边框。) K- X0 C# e* G' ~* i: Z% @2 H2 D
以下各特效用的HTML代码相同:
3 T0 h& `6 J! O2 k5 O1 F<div id="box">
编程适合那些有不同想法的人... <br/>
对于那些想要创造大事物并愿意改变世界的人们。
</div> 0 G! ^ E8 `# y& W+ X( t: O
1. CSS动画边框8 U' F2 @5 ^2 K5 [; }% _
CSS代码:
2 q3 f9 @" ]* |& |' E@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;
} 效果如下:
" `" d1 S8 u$ u0 o1 P _' y) T* C4 O
: D k7 r+ z3 G, h% [7 N# t
9 V a% @# c. j$ R. k' w2. CSS图像边框
" J$ f, V2 G& t* @& |6 kCSS代码:/ B+ [9 W% ]% S3 k. [
#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;
} 效果如下:( r" e- Y( G$ Y2 F
) }; Q y ^5 V) _$ F, |
* M$ B* e5 i! N* a% O3.CSS蛇式边框
% r% j P S9 Y9 l3 s/ i5 o' ICSS代码:* w2 P' C `) Q" t) 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;
} 效果如下:
/ ^4 j6 B9 C2 }: i! ], T
, y7 @( x9 h( i8 O# r9 S) F
& Z! f9 z4 ~) a9 r: c ?
4.CSS阶梯样式边框
5 [) d# E8 L8 r- o- iCSS代码:
# V T( d) a+ e& c* s3 j#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
} 效果如下:: n$ c! p- ^/ F' C: F! m
' v, ?$ J9 Z0 i9 C
5 q4 @. w) }+ o; r& O2 g: ~5.CSS只有阴影边框
9 l' g3 I* Z; _6 I4 UCSS代码:" F, j) p; B P& q o( U- l) ~
#box {
font-family: Arial;
font-size: 18px;
line-height: 30px;
font-weight: bold;
color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 00010px white;
} 效果如下:
, S. X$ G0 e6 a. Q" U7 s- N x
. |: b( _" b) |! j; U% Q
5 s! I3 l/ s+ \( s* N6.CSS带阴影和轮廓的边框
* m; Z# m, K# g% u0 ^' B/ ?CSS代码:
) M" x( H5 i% o# V Z#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;
} 效果如下:
+ g; Y3 C8 P0 P5 R8 s$ q
( _' P) \! ]* d: ?6 i
' b, i! D% b4 N' N# s% n: p
7.CSS少量阴影和轮廓的边框! a: T. C/ n4 N) L8 U" [
CSS代码:: q; Q4 W2 W1 w' W, J, g
#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;
} 效果如下:
; a" r: N/ U0 x# m4 ~6 [
* D& k; I( }8 o& U
4 L9 z. x* @! T2 q! L O8.CSS带有阴影的双边框
, | W2 r; [3 B) SCSS代码:8 w' `! m! j9 N7 O) i# O
#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;
} 效果如下:; s4 O, X) j3 s0 `) z
4 P9 t' B5 [1 y% m; U8 o2 K7 p6 a, d0 [: V* v6 ^8 e; A7 c4 f
9.CSS多色边框+ C/ R5 k2 F% q
CSS代码:6 k2 Z. I1 x0 H& ]: y. [3 s
#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;
} 效果如下: x- K# W* o9 t1 o! n6 E
|