CSS 样式是边框最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。
. k' i- K3 G" v$ { 以下各特效用的HTML代码相同：
- |' M: N. i2 N& ~8 ]1 W% J<div id="box">
编程适合那些有不同想法的人... <br/>
对于那些想要创造大事物并愿意改变世界的人们。
</div>
, t& L& k! u# x: ~' Q+ v& {9 f
1. CSS动画边框' t' v" ~' y8 z- C
CSS代码：1 M) g0 ~! O3 w- `1 H
@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;
}
效果如下：# [. C- N9 v* @- Q
6 U2 o( Q+ d* m- A; h" ^# G) U" G2 |, k; I# \( ^0 ?
2. CSS图像边框
' P8 D. l$ S3 w/ cCSS代码：4 s4 u3 Z" G; I( q8 Y
#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;
}
效果如下：- o" s/ @& V* n
. z* z8 o9 i. | A8 g; c1 m. ?9 C3 u
% ]; f) h; Q' H3.CSS蛇式边框8 w0 }* V0 n' T, ]! s7 s
CSS代码：
( ~' a! y y5 U' s2 ~& z: w#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;
}
效果如下：
+ L4 \ ^" Q. _$ W: p2 A. ^
' o; A* n: k1 A4 j) J
8 V$ b! J$ }1 A1 u6 _5 W
4.CSS阶梯样式边框; n0 B' {7 r- ?5 L! D1 q0 f
CSS代码：' C6 ]4 U8 A8 |: _3 M
#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 s+ F- a: \# I+ { R6 {
& u, r4 {0 f! S
3 Y% r0 e0 s" x7 W
5.CSS只有阴影边框
& n# }, N9 L+ sCSS代码：
" L3 Y* g7 c- j4 I( i#box {
font-family: Arial;
font-size: 18px;
line-height: 30px;
font-weight: bold;
color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 00010px white;
}
效果如下：
" L! O3 P# L: z! ~0 E
: }9 _! g2 w+ O+ c5 v( e) P
; m. a/ o# y) d( `7 q6.CSS带阴影和轮廓的边框
/ K! K3 K ?1 y/ x- P0 y) o) cCSS代码：
/ b" ?& Z2 e, `; S% J7 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;
}
效果如下：
. @& e& l* t8 a1 H* n! [% m* u* Y
7 i2 d2 ~' N8 `* l! \8 J0 B
$ E4 _$ i4 p A1 h5 k7 x8 O7.CSS少量阴影和轮廓的边框8 h# d$ e$ A/ c7 v
CSS代码：
3 C" t. n3 O7 [9 C9 o4 u0 h2 D; [#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;
}
效果如下：
4 \* x3 X& d2 X! z% _5 [& [
9 O! f- R; `/ K K
( }: ]" `" ~/ b" t, L( g$ m
8.CSS带有阴影的双边框
! z9 ?: ~& [+ ~' P: |CSS代码：
' b& L# e# p' c6 E% a# H4 M/ ~#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;
}
效果如下：
; h$ p8 X" f! ~) |9 K2 N
( p5 ^1 @: L9 Z) s9 B5 M) _5 T4 z+ e+ J
9.CSS多色边框' V" h* S# x6 E3 S% C5 F: S
CSS代码：
: ]& N, g0 a! @#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;
}
效果如下：
+ b3 I* v1 ]& z
| 
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2020-7-6 13:32:58