CSS 样式是边框最重要的一个方面,这不是因为样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有样式,将根本没有边框。1 h/ I' H% f2 S8 u' b, m
以下各特效用的HTML代码相同:
+ \7 t0 |: E1 M<div id="box">
编程适合那些有不同想法的人... <br/>
对于那些想要创造大事物并愿意改变世界的人们。
</div>
% V+ F& m% q5 c1. CSS动画边框
+ p( o% d" ^7 Y6 W) eCSS代码:
& J! s, I: h8 R3 W@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;
} 效果如下:- |. i( }2 O8 p$ w: b& m
, s; Q2 C/ _) a8 z$ ?, T* b6 O: p
; B2 o$ R% I. y5 d- o2. CSS图像边框& F0 S& \/ |8 }7 m$ q. E5 A
CSS代码:
" z$ m6 P5 W4 @#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;
} 效果如下:
' v0 u( z8 L4 W* e
: w1 ~* b9 @; t! O+ r. {. T
) W' _- a6 ]1 r3.CSS蛇式边框
2 |1 }/ ^+ r% x3 I. dCSS代码:
2 L5 X$ J3 a, h#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;
} 效果如下:
0 E+ u1 c: z) e2 z5 z
9 U1 E6 q# R( \' k" r' I
. u j/ V3 E9 o9 H4.CSS阶梯样式边框
6 G% w, c, ?2 o! Q/ PCSS代码:
4 e% X. Y( t: ?$ g; d6 M+ X8 h#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
} 效果如下:
8 Q4 O, e. R$ u4 |
2 I" l3 q5 Q! }
1 n* l# O3 e: _# H" M* U$ D5.CSS只有阴影边框
t, c2 ~% V2 @: i: h1 S- V' DCSS代码:: C* N: S8 I: E7 h6 [2 r I1 ~+ B
#box {
font-family: Arial;
font-size: 18px;
line-height: 30px;
font-weight: bold;
color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 00010px white;
} 效果如下:2 o: i4 {4 N; O# y( I+ @$ z
* _5 B) J J4 i0 W# M
" E3 I2 O* M, [6.CSS带阴影和轮廓的边框
! s6 h& F H* ICSS代码:
8 d6 X; o* i( o#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;
} 效果如下:
0 h4 J. f0 L# y8 W& |3 K5 k
3 R% e3 c& c' C+ _) @$ @4 C$ D/ `0 H* ^9 T8 j! g3 v: W
7.CSS少量阴影和轮廓的边框
: q$ z9 H5 _# Q* h3 p" p' @8 QCSS代码:
3 C- k1 ?. K6 _$ ^#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;
} 效果如下:, c; q q) `3 B7 E
6 p3 u% @2 O8 G% F1 i* V
! z! f1 E: Q0 h' E8.CSS带有阴影的双边框
) @& N8 V; ]! Y2 d* C6 V+ `CSS代码:5 F( v, n, Z3 l* }5 y
#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;
} 效果如下:
& I; D0 n, z3 Z5 _# R U6 a7 [: ?) j
" H D$ {, ?, n( Y5 P
, \9 V# _5 I7 y- f5 z* _+ v* \9.CSS多色边框
" G6 I" r0 V) u+ C6 {9 RCSS代码:; }% c4 ?" M8 X$ L6 x+ p9 G7 j& W
#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;
} 效果如下:
5 M; W: z2 y' D, r b' [! T
|