|
CSS 样式是边框最重要的一个方面,这不是因为样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有样式,将根本没有边框。( j! r4 E8 G- t+ l
以下各特效用的HTML代码相同:% l5 I- [. z% ?- m0 t
- <div id="box">
- 编程适合那些有不同想法的人... <br/>
- 对于那些想要创造大事物并愿意改变世界的人们。
- </div>
8 J1 c3 { L: ?. N9 x: x
1. CSS动画边框3 J( B- Z; t d8 S
CSS代码: : E, W: \! `$ D, ^$ C0 s
- @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;
- }
效果如下:
- r/ |; B8 [: s
0 L* p/ B2 P( L3 f' k8 {: _ o
: k- ]0 ^, d! i& h8 U% o, x+ h/ y2. CSS图像边框
+ c6 \4 Y7 d4 _9 @3 N- YCSS代码:
% `( s' g7 q1 m- #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;
- }
效果如下:
: P2 r. E$ {9 R
" l# N" z; h" w0 Y O
- m K* |% y2 D6 S. q3.CSS蛇式边框
! o) A2 E4 }- S8 ]CSS代码: ' [6 k, ^8 ?8 ~3 M& d. s8 E
- #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;
- }
效果如下:
) u3 p3 L$ t" ~$ G+ D0 _+ ?0 Q
2 ]1 e" \4 d8 M
- b& l: s+ C" z2 b4.CSS阶梯样式边框2 M( W) Q* T9 X" `
CSS代码: " [' I" R6 y- V5 w- ~( l
- #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
- }
效果如下:
( f. Q/ G, @3 g A6 y* B) p
* U# F3 M: N- y- i- u5 n+ @
7 k0 H2 `0 U' }, h+ D; H5 Y. N. Z5.CSS只有阴影边框
3 O& B( u w3 QCSS代码: ! n0 U D0 F. ]! U' ?! \
- #box {
- font-family: Arial;
- font-size: 18px;
- line-height: 30px;
- font-weight: bold;
- color: white;
- padding: 40px;
- border-radius: 10px;
- box-shadow: 00010px white;
- }
效果如下: + y$ R& D7 w" L7 F
. s# E( E+ G5 C; g$ q; D/ t; _
' {4 O8 b( H( u! H. E& c
6.CSS带阴影和轮廓的边框
& g% l$ i" ~% w2 ]CSS代码:
% v. R. F" I: i+ L1 w, 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;
- }
效果如下: ) a: M) G- d" l+ k! a; z9 h- M
/ O$ i# T% V: o( v8 a' t
& U# X7 x0 F9 m1 W% [
7.CSS少量阴影和轮廓的边框
( J1 Y: ~( C) r& W$ t. X6 O+ ACSS代码: & L0 v! {8 C9 m, d# f6 \8 L) H( C
- #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;
- }
效果如下: / o4 S7 A0 j1 \1 q
- Q2 @6 q- i; k) N; N# {. V$ T7 @: d/ J
3 \* H: ?0 }9 I# r8.CSS带有阴影的双边框* O- G: K5 c9 a' R" j9 y1 A* P
CSS代码: 7 `9 x3 E$ ?$ D* H0 \
- #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 z5 S! i, d9 D" G; X8 O+ I5 S
5 X; z7 @0 b9 H) S1 H0 m
' l2 I! m% J- Y; @9.CSS多色边框
; l" f4 f- b# \CSS代码:
; M! ^) F: l% K5 d- #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;
- }
效果如下:
! o; x& ?/ {8 i* g0 w* ?
|
|