CSS 样式是边框最重要的一个方面,这不是因为样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有样式,将根本没有边框。- \& Y- @9 h$ e# @ i, c
以下各特效用的HTML代码相同:
! d, {. |+ J6 z: I4 [$ p' F2 U<div id="box">
编程适合那些有不同想法的人... <br/>
对于那些想要创造大事物并愿意改变世界的人们。
</div>
9 _# c' C, a" p% ?" B# [& Y1. CSS动画边框
0 s6 A5 t, y5 j% [' RCSS代码:
3 B, |, |: v5 ] e% W* l! U@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;
} 效果如下:$ m7 D$ F% |( J* D$ l7 o
) @. t8 [1 X) B9 W- P! A
2 _0 F, U( z$ E$ ^2 i* H$ K2. CSS图像边框
6 R+ n/ n* R- }, ~+ j- RCSS代码:
9 V+ H9 i+ h6 [ p# F8 N7 w8 b% [#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;
} 效果如下:
: g2 l2 m! |5 i
. A9 D9 B$ R% ~* @
+ c& \1 c" t0 y1 l6 u' J
3.CSS蛇式边框" o9 @" Q+ l. P2 D7 c$ l
CSS代码:- U1 u! [+ M# c) Y
#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;
} 效果如下:; Y" N: U/ g8 ^6 x7 O
/ B& P& A2 f4 _( I Z) w2 K) f1 @% T
4.CSS阶梯样式边框
; G6 h+ g$ Y# m& p( D2 y2 k. kCSS代码:# `" i1 i0 e$ i8 Z' E! ^# J
#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
} 效果如下:( b! ~/ C) Z' m6 V2 O# w
3 p% w9 n2 Z5 _* i' M5 e/ Q
; O0 ]" f( X) }0 s3 z5 O8 @- S
5.CSS只有阴影边框) f3 g8 t7 n8 Z- \4 S! E9 X, q
CSS代码:) ~9 V) [; \7 @" u6 e7 t
#box {
font-family: Arial;
font-size: 18px;
line-height: 30px;
font-weight: bold;
color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 00010px white;
} 效果如下:
9 I( `. e- s, j, u0 t$ {
1 J9 e" ~( z+ e% {# H
, k- W3 b( s- \% T) K7 x. S( t6.CSS带阴影和轮廓的边框
! y! i+ O+ o. w: |0 `! J8 aCSS代码:+ C( D8 L( B) |+ h: i p% f2 P
#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;
} 效果如下:
9 c) y$ c7 j, k' x2 T0 f
0 b5 e. ^. E# m- z
- X1 e3 Z( s6 S2 `. y
7.CSS少量阴影和轮廓的边框* |4 O0 U; C% n8 G8 ?
CSS代码:
+ `& o1 V% S9 n) ]. T( P% m#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;
} 效果如下:. ^: h) Q1 c$ @' t4 M
6 v) ]3 V) i1 @/ N% F( ? P" v( @ h3 ]4 n+ W, d# @
8.CSS带有阴影的双边框
1 M3 T9 m- n* NCSS代码:) i2 S* N ^1 B ]5 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;
} 效果如下:
5 k4 H9 b& Y4 P7 {
3 |0 L0 M3 n" W( f6 G8 z2 ]# }7 U) E" z9 T
9.CSS多色边框
- {. ?) h, ~: M3 G" U0 tCSS代码:
' N0 d; `* K A4 c+ E& y, |#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;
} 效果如下:6 L" Z; j) t/ q, t; ~, U2 B. A% h
|