CSS 样式是边框最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。
* W, |9 i( e {! C( V 以下各特效用的HTML代码相同：1 \, u- |8 C- T3 T
<div id="box">
编程适合那些有不同想法的人... <br/>
对于那些想要创造大事物并愿意改变世界的人们。
</div>
+ ]- a. S' q4 W9 n* a: Y
1. CSS动画边框$ D( l! V; n4 t% B
CSS代码：# V2 @: k! W- X J9 T! b9 {
@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;
}
效果如下：
; k" b: \1 H. f( K) p+ |% q. v
# e% H1 |2 U+ N$ j$ H6 ]
4 t' ?: E \$ o6 d2. CSS图像边框" B$ W2 \( T! v* \( b
CSS代码：- a, F8 U/ ^( P
#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;
}
效果如下：
3 s& a6 V6 f/ U- k
8 A1 E4 M w9 \8 B9 K1 V7 s
# o( x w/ m( l3 d& x3.CSS蛇式边框6 B: G9 P' P$ h3 w2 ?) H8 E! y" @
CSS代码：
8 [5 ]! h8 q/ e! F: F3 e' y9 C#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 c# A& z: c3 D- M8 Z8 [) [" a
+ @( I; }2 }% m& s+ g
5 j- Y1 u8 @1 j, a# j3 u
4.CSS阶梯样式边框
1 p) e- J3 Q( R/ m8 OCSS代码：
. d: a" b n% v0 ~3 ~#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
}
效果如下：" }, _ i& G% l0 ?: E. H
6 T9 u& ]# H( V
4 D: l4 A& i( _0 x9 j. U; }
5.CSS只有阴影边框( p7 W6 K; d4 ^8 g, M4 s' b$ w
CSS代码：
, m k) y1 G1 ^" i4 X, G& d) [) D#box {
font-family: Arial;
font-size: 18px;
line-height: 30px;
font-weight: bold;
color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 00010px white;
}
效果如下：
% J0 ~2 N: Q) P) Z; g9 y
; e3 c) {& P' W) x! w
! f6 e& A, `/ c
6.CSS带阴影和轮廓的边框4 K- c+ L: o8 |( E
CSS代码：% \. q9 b S- O# `8 M% T* `5 [
#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;
}
效果如下：' L/ h. O1 U) t) V6 ^
2 Z; `7 M: N3 H0 g
. {/ }: V* S& v# C: e" E7.CSS少量阴影和轮廓的边框2 O. @, m7 ^6 `2 E3 d3 g; E
CSS代码：# B- ~2 H5 Y% Y9 L/ B
#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;
}
效果如下：
0 H4 ?3 L3 [" X6 F+ E( E ]8 }1 M+ @
! a/ U/ J" l( u' O d( x8 x. b. P; J* {6 I5 _
8.CSS带有阴影的双边框* f9 ]. Z' ~' ]# I
CSS代码：5 r0 c* Z$ ^- Y
#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;
}
效果如下：
: f/ n1 T. D0 u3 B3 C K% c
. o% i0 D4 |3 k9 Y! d. M. D H
, F& x w u( l6 X9.CSS多色边框
0 `' T& i7 z) k2 ], M, hCSS代码：$ d) {* T4 \" [0 W; J& c
#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;
}
效果如下：
( ?$ R' q* m. G! q- b
| 
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2020-7-6 13:32:58