CSS 样式是边框最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。$ L! ]7 @: R' X
以下各特效用的HTML代码相同：
* ?; y" V3 P3 f- @2 o<div id="box">
编程适合那些有不同想法的人... <br/>
对于那些想要创造大事物并愿意改变世界的人们。
</div>
7 _7 F' h( c Y4 n# @2 b) |
1. CSS动画边框( G1 |7 X* m2 f: `# a1 J8 S
CSS代码：
4 g5 t( o; x3 {! i! A7 R' x1 j@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;
}
效果如下：
. V0 q9 j+ a- E' U {
% W$ G: P& \0 i1 `* A
" s; B) Z6 J* z x7 L: @2. CSS图像边框
- m( d# U" j6 N' x* a5 v3 W5 @2 d1 lCSS代码：
" t/ ^ p3 v5 s. H4 Y/ b) @& C#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;
}
效果如下：
7 @3 L2 ~6 I0 U( t8 ]- q. m
' o0 k7 T' a/ t8 n
0 ]. L) c7 x& F. r
3.CSS蛇式边框
8 \% w3 K, d9 {$ g/ oCSS代码：
5 W8 g3 v% G; r3 r1 o; o#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;
}
效果如下：
, ?7 J8 `" s: m5 u1 |: k$ D
! h' c& Q' ]6 j( U
/ z( Z0 _) L4 W4 m D4.CSS阶梯样式边框
$ `6 Q0 I% b, iCSS代码：
# Z, }+ ^ H5 }# X$ E Y#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
}
效果如下：, ?' V% X3 e" s! \$ B: N
! f# Q- @( }7 W; ]
9 k7 _: ?) r! g! z( V5.CSS只有阴影边框" K6 D/ S; M, w6 C$ A9 k
CSS代码：
r' @; R( R/ ~#box {
font-family: Arial;
font-size: 18px;
line-height: 30px;
font-weight: bold;
color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 00010px white;
}
效果如下：" z C+ |7 v; u. P9 C
. X3 X; @! C7 _0 y, p S: p
5 d0 {7 q/ M0 J2 |' W! ]' i) j/ G6.CSS带阴影和轮廓的边框
- L3 {) K) J1 C7 lCSS代码：
( e* u4 {+ I x#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;
}
效果如下：; c+ Y, V9 G5 @$ b: ^1 J7 x
" m" o3 l* i- Q1 j0 e8 L& z) W- C+ z
3 u, Q7 Y5 L& v' Q7.CSS少量阴影和轮廓的边框
4 }" m1 j, E- o) ^ \1 iCSS代码：
% F2 r8 b, J1 B#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;
}
效果如下：
7 a* p$ C( e, u1 [3 o$ D1 v
2 A2 u6 X3 y- Z6 Z0 s, X
, T9 \2 r, b2 ]! @8.CSS带有阴影的双边框# t6 O: p+ k( ?' o2 T0 m5 g
CSS代码：9 V# h3 T( O" G1 V
#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;
}
效果如下：
, E2 L# r2 u& m" G3 G$ A
6 m4 K0 d: Z2 C* |0 `8 Q
! r' A& |" R- g9.CSS多色边框
; O& `$ ]6 y) yCSS代码：; m/ V- [1 q) e0 f( 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;
}
效果如下：
& Z; n" X, Q' Z9 C& O& f
| 
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2020-7-6 13:32:58