CSS 样式是边框最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。
3 m! k: u' F0 e( Y 以下各特效用的HTML代码相同：
. r5 _) ?6 m' q5 K: R. V `<div id="box">
编程适合那些有不同想法的人... <br/>
对于那些想要创造大事物并愿意改变世界的人们。
</div>
3 q- ?- @/ `4 v$ ~" E
1. CSS动画边框
0 s" L" \1 o% N, k" G ]CSS代码：% Q ?* {$ b8 V
@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;
}
效果如下：
; M8 S3 ^& F- a! K6 s
2 U- z2 Y" k, {4 L+ C4 t
; j: ~8 V% q# w7 ?; i9 V5 J2. CSS图像边框
, ^9 ?/ Z3 W. N# oCSS代码：' l: P" Q3 s! ?+ G( M
#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- H: ], i6 s% V( u. Z
( ]& J# r- j b! h
5 \2 h5 q, D" @3.CSS蛇式边框
* O1 ?; I9 E2 n! WCSS代码：
+ n' f' Z! e& k+ \; Z' z#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;
}
效果如下：8 E3 m% b6 W8 _% ~0 }6 d8 L
* L: `1 F% n" v' V2 h' g2 j. d, O8 m0 R! @4 n
4.CSS阶梯样式边框
* ?/ y# G0 K0 ~- e# MCSS代码：
( |. J7 D0 @9 u4 O5 g& _% p6 S#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 i3 h% ] n4 @. B8 q
6 g& Z; c. K) a# M5 Z+ y, A3 j' E7 L
! b( |( _0 J% n2 o
5.CSS只有阴影边框
7 V j) A$ b0 q, _CSS代码：
% z. C5 R9 l' U2 f6 n#box {
font-family: Arial;
font-size: 18px;
line-height: 30px;
font-weight: bold;
color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 00010px white;
}
效果如下：8 Z; u% b9 w* B0 q$ T& e
% j% }4 Y1 P& c' J' E2 f! `
& A7 \" \& K4 i$ G) H0 o; J6 A6.CSS带阴影和轮廓的边框" ~; I6 M3 Q+ m8 I8 n+ l7 c4 R
CSS代码：% |( g- m( b# }' J3 `
#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;
}
效果如下：# w( S$ \$ @# u+ O! T
, Z X: L4 ~* M# F5 x
# [: n) H1 g5 h/ M7 e0 B& t/ k$ N
7.CSS少量阴影和轮廓的边框, B6 u2 w6 m8 u5 J, J. j
CSS代码：3 c8 }# H6 D) t
#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) [9 [+ ]0 c5 w, ]) A
$ v5 E+ j& L, E8 F' a
3 _+ e/ t) G% e8 F& B8.CSS带有阴影的双边框* L2 @- ?/ ^: c4 b2 ?) {# s
CSS代码：7 i P- @/ A$ 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;
}
效果如下：. P1 W0 c& u/ U/ ^
0 K- S* H$ N# U' j5 F" Q1 ]1 F) n/ S
9.CSS多色边框
8 A. ^! Q* T* E; k0 i# ?* `' kCSS代码：
: y+ q( J' u; I7 p$ I* q#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;
}
效果如下：
& ~, `4 v2 `% M; a
| 
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2020-7-6 13:32:58