CSS 样式是边框最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。! ]& @, K+ G+ _3 j# m
以下各特效用的HTML代码相同：
- q/ _" n) k t) q<div id="box">
编程适合那些有不同想法的人... <br/>
对于那些想要创造大事物并愿意改变世界的人们。
</div>
+ F( N: i6 W, _- _' a1. CSS动画边框
+ ?; j3 ~/ f2 q1 [+ ?4 {$ H3 JCSS代码：* F& P- J9 w5 Y
@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;
}
效果如下：
4 ?. ]! M6 P; m; F' M- O. o
( t4 ^( [" V$ i3 C
, W- e, \" S) s* i% Q- c2. CSS图像边框- ?( F3 M4 U4 U
CSS代码：, M" E1 e/ j2 @, {. }; M$ 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;
}
效果如下：" l) j% M! m1 U3 i& _
+ Z: @2 V4 [- J9 r
% {0 ]* W: |: p/ d4 L) i3.CSS蛇式边框
, ?; ?3 g( k( `4 @; G" d. OCSS代码：
D& A8 H/ W6 }, r6 k1 x#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;
}
效果如下：, a( c+ F8 \& _( Q% }) }3 C- C
- F+ _9 a$ s! p {- _+ v1 g* `, v: K" n2 f1 A8 O8 a' ?$ _
4.CSS阶梯样式边框
. [: q$ E5 _0 hCSS代码：: I% T8 E, R0 j! T4 U. d
#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 w3 p. \* a8 ^* H; @
: G8 z4 r! X& V, o
3 l/ ^* a: C2 e5.CSS只有阴影边框5 E" q5 C( m2 ?. g
CSS代码：, u, g6 K4 @/ n. J
#box {
font-family: Arial;
font-size: 18px;
line-height: 30px;
font-weight: bold;
color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 00010px white;
}
效果如下：% {/ U: t# U9 l& t) x6 ~
7 c4 j+ \3 t% u4 S
3 |* ?+ e1 V3 b
6.CSS带阴影和轮廓的边框8 P; S9 C( t) c0 x/ g$ e- V
CSS代码：8 b+ t, ~$ P! s4 ]+ ^' `
#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;
}
效果如下：
8 t/ @. k7 o' A+ C) k
+ M" @6 r, }( I9 z) n7 N! [7 s/ }9 ?" ^. i% x! O6 {/ M/ M D- `
7.CSS少量阴影和轮廓的边框# r% u( h; e; t6 p4 O; c1 H
CSS代码：
, z8 b$ H9 ^8 m; l9 R q$ K#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;
}
效果如下：
5 m7 r: N& N$ d0 i2 B* P3 k6 f
0 [$ m5 z; B/ n' P. x: U- a; {
& L& I# p }5 S9 J$ ~+ t8.CSS带有阴影的双边框1 X9 l6 d# i3 F7 Y, g1 ?/ ~0 L
CSS代码：. P: D7 l, Y# P0 u, K% m9 A$ a
#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;
}
效果如下：; A% @. X% F' O2 P* A
& ~/ x- F: p" [# @1 c2 r9 N$ @) ~! `3 a
9.CSS多色边框
" z" X: i4 U4 O+ ]* D3 ZCSS代码：4 z) v% x; O7 Y! w% T: a2 X3 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;
}
效果如下：
( B" Q4 L3 O! M: t$ F! e# K8 |2 w
| 
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2020-7-6 13:32:58