CSS 样式是边框最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。' w# [3 m/ {/ O5 @; O
以下各特效用的HTML代码相同：1 A, Z& {" S3 r, d
<div id="box">
编程适合那些有不同想法的人... <br/>
对于那些想要创造大事物并愿意改变世界的人们。
</div>
/ E6 R6 ~" @3 Q; W
1. CSS动画边框
1 `; ?" i% x5 W! i U; RCSS代码： V, I' G- U+ K# k1 L3 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;
}
效果如下：; x7 }9 J1 A# Y4 K) I/ U3 c& |
! C$ D8 `) {, P" t. T- Y, |) c' |% A9 X5 r/ v9 N0 |$ M
2. CSS图像边框
9 l- O% t5 i1 ?; bCSS代码：+ d8 _4 y. Y4 l
#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 |* q1 P, k- s9 [
4 R: `8 W3 K; y( G8 r
' C% G1 \, b) s0 p0 @
3.CSS蛇式边框" v. Z( G& u. h7 x' E, @
CSS代码：% }; \) f; j& `; V
#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;
}
效果如下： Y7 L9 s! U$ k; v, F% B
5 t1 r. [6 h) }& O U6 |9 D1 _& \* v) b% f: C/ G( F! H) o$ b
4.CSS阶梯样式边框5 \ M5 _: M, s3 R9 A( C
CSS代码：
8 r+ A, {7 f* y5 }#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
}
效果如下：0 N- E+ ?* R% w9 J4 C- ~0 v
8 k8 z2 Z) c3 C# `5 s/ k
) v2 ~3 M3 c; A- I, |; s6 @- X
5.CSS只有阴影边框% j( P& t) \; y, W: |! W a
CSS代码：, q' `' h+ n: W6 ?) r# @% H5 \
#box {
font-family: Arial;
font-size: 18px;
line-height: 30px;
font-weight: bold;
color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 00010px white;
}
效果如下：6 J! v+ }& B& U+ _
- J: M- v6 V9 h
`& K1 W2 ]5 |& c' _ D
6.CSS带阴影和轮廓的边框* n0 k( ^: W# n/ W! G0 a, `
CSS代码：5 ~, M, j) U" P4 @
#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;
}
效果如下：1 s N9 A* c4 c3 I9 v
( k5 g$ O! F. _- p
( W2 I- k9 H* F7.CSS少量阴影和轮廓的边框
' ?2 v1 d/ j* I! }! H$ x* @. A) rCSS代码：
* ?+ `: k _5 \9 ]0 J `#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;
}
效果如下： u+ {7 o( m" v, L- h8 U }* N( O$ `
6 v: q2 @. Z( H- l: Z# @3 e
' N, \) b# J ]& @* j& O: o$ X8.CSS带有阴影的双边框' W3 T- d+ E# S# q7 A
CSS代码：
3 {% a8 O2 }$ Y! y8 o0 g9 |#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;
}
效果如下：
* m+ n |% E0 l' D4 u( L: ?1 ~
( C' F( V+ p! N6 w6 y+ E# I5 P- h) `: f5 i
9.CSS多色边框
9 g5 y3 b3 {! F- z! LCSS代码：
9 o& K3 V' ?$ R#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;
}
效果如下：
: m% n+ }- ^% E9 @
| 
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2020-7-6 13:32:58