CSS 样式是边框最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。
+ }7 N4 N, J# ^2 H 以下各特效用的HTML代码相同：
6 [5 u- H1 B. ]<div id="box">
编程适合那些有不同想法的人... <br/>
对于那些想要创造大事物并愿意改变世界的人们。
</div>
/ q4 h P5 _; L
1. CSS动画边框
9 d1 b1 b& @0 `6 R7 j' rCSS代码：
( M5 }4 k I4 Q+ G: T1 \4 P1 {6 i@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;
}
效果如下： o9 ?$ c( H( W9 U
- J' m2 Q% n+ }* g( R9 [
' W" ~1 i! T3 S) o; L2. CSS图像边框9 a1 E: Q3 Q0 |- D
CSS代码：
2 f, T: `3 L8 `% [5 }, O7 j#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;
}
效果如下：' S0 v( \' q+ K3 U# x( e
. \, i! z; H3 ~+ X' E3 q H& P7 l
( } J* y @3 i8 {* q3.CSS蛇式边框
/ o! G: |: ]4 c4 XCSS代码：
D# H( O" ?7 g# r& |#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;
}
效果如下：3 f0 X/ q) m V7 K+ k$ J8 C
# T! u n) V! r1 ^
: L0 x, N2 y3 U8 K4.CSS阶梯样式边框
2 Q8 z. W; N0 ^/ |8 R5 W X# i3 A; E0 LCSS代码：; J8 T. O7 P( j" H9 i' a/ Z) X& ?
#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) c/ N: c! R& M& x A8 e
4 N6 W/ V. C. R4 \" u1 @0 e
8 J5 V- u1 z& w, K* y
5.CSS只有阴影边框5 f3 J5 Z5 _9 {4 T; F, p" g6 S
CSS代码：
# e3 e6 W, |! |* w b! H#box {
font-family: Arial;
font-size: 18px;
line-height: 30px;
font-weight: bold;
color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 00010px white;
}
效果如下：
: e, s5 B* e9 ]* Q7 ]( k- w
; A% a. X1 b. t$ l# ]
3 ]! ~* d1 o8 C Z. ~6.CSS带阴影和轮廓的边框
5 W4 B3 n% Z- X' h8 \, xCSS代码：/ {0 c0 N) `0 g' }4 {* N- o: H) N' i
#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;
}
效果如下：% _) x: ?1 ?( o; R; y9 N
. U7 N# O: w2 i2 H( X/ |7 K1 Z4 T3 i% n0 p
7.CSS少量阴影和轮廓的边框' q. Z7 j8 C6 Q3 _
CSS代码：
* q2 \6 X9 q% ]+ S3 m' {' A) L+ p: n! o#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;
}
效果如下：# K$ g! B. a# t9 O( x( t; b
/ r0 X/ T4 m/ i6 D
; m% n9 s* q! ^! [9 E s8.CSS带有阴影的双边框
L3 r2 @) n q4 @6 Y' V1 }CSS代码：! s; M! R2 [2 I" R
#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;
}
效果如下：
/ V) d& i2 t; K( L% X( |$ [
; c5 T' B5 z2 S* ?* ]
' D9 ^; Y0 ?! o; G2 g& k' \9.CSS多色边框
. l, a; ~- V, D1 z4 e1 C: ]CSS代码：
0 P) N: [: e: B: l#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;
}
效果如下：' N @0 W: J7 l% Q
| 
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2020-7-6 13:32:58