QQ登录

只需要一步,快速开始

APP扫码登录

只需要一步,快速开始

手机号码,快捷登录

泡泡马甲APP 更多内容请下载泡泡马甲手机客户端APP 立即下载 ×
查看: 2438|回复: 0

[HTML/CSS/JS] 几个非常绚丽的CSS样式边框特效代码

[复制链接]

等级头衔

积分成就    金币 : 2802
   泡泡 : 1516
   精华 : 6
   在线时间 : 1241 小时
   最后登录 : 2024-3-29

丰功伟绩

优秀达人突出贡献荣誉管理论坛元老

联系方式
发表于 2020-7-6 13:32:58 | 显示全部楼层 |阅读模式
       CSS 样式是边框最重要的一个方面,这不是因为样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有样式,将根本没有边框。( j! r4 E8 G- t+ l
       以下各特效用的HTML代码相同:% l5 I- [. z% ?- m0 t
  1. <div id="box">
  2.   编程适合那些有不同想法的人... <br/>
  3.   对于那些想要创造大事物并愿意改变世界的人们。
  4. </div>
8 J1 c3 {  L: ?. N9 x: x
1. CSS动画边框3 J( B- Z; t  d8 S
CSS代码:: E, W: \! `$ D, ^$ C0 s
  1. @keyframes animated-border {
  2.   0% {
  3.     box-shadow: 0000rgba(255,255,255,0.4);
  4.   }
  5.   100% {
  6.      box-shadow: 00020pxrgba(255,255,255,0);
  7.   }
  8. }
  9. #box {
  10.   animation: animated-border 1.5s infinite;
  11.   font-family: Arial;
  12.   font-size: 18px;
  13.   line-height: 30px;
  14.   font-weight: bold;
  15.   color: white;
  16.   border: 2px solid;
  17.   border-radius: 10px;
  18.   padding: 15px;
  19. }
效果如下:
- r/ |; B8 [: s 1.gif

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
  1. #box {
  2.     font-family: Arial;
  3.     font-size: 18px;
  4.     line-height: 30px;
  5.     font-weight: bold;
  6.     color: white;
  7.     border: 40px solid transparent;
  8.     border-image: url(https://image.flaticon.com/icons/svg/648/648787.svg);
  9.     border-image-slice: 100%;
  10.     border-image-width: 60px;
  11.     padding: 15px;
  12. }
效果如下:
: P2 r. E$ {9 R 2.jpg
" 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
  1. #box {
  2.   font-family: Arial;
  3.     font-size: 18px;
  4.     line-height: 30px;
  5.     font-weight: bold;
  6.     color: white;
  7.     padding: 15px;
  8.     border: 10px dashed #FF5722;
  9.     background:
  10.     linear-gradient(to top, green, 10px, transparent 10px),
  11.     linear-gradient(to right, green, 10px, transparent 10px),
  12.     linear-gradient(to bottom, green, 10px, transparent 10px),
  13.     linear-gradient(to left, green, 10px, transparent 10px);
  14.     background-origin: border-box;
  15. }
效果如下:
) u3 p3 L$ t" ~$ G+ D0 _+ ?0 Q 3.jpg

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
  1. #box {
  2.   font-family: Arial;
  3.     font-size: 18px;
  4.     line-height: 30px;
  5.     font-weight: bold;
  6.     color: white;
  7.     padding: 40px;
  8.     box-shadow:
  9.   inset #0096880005px,
  10.       inset #059c8e0001px,
  11.       inset #0cab9c00010px,
  12.       inset #1fbdae00011px,
  13.       inset #8ce9ff00016px,
  14.       inset #48e4d600017px,
  15.       inset #e5f9f700021px,
  16.       inset #bfecf700022px
  17. }
效果如下:
( f. Q/ G, @3 g  A6 y* B) p 4.jpg

* 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' ?! \
  1. #box {
  2.   font-family: Arial;
  3.     font-size: 18px;
  4.     line-height: 30px;
  5.     font-weight: bold;
  6.     color: white;
  7.     padding: 40px;
  8.     border-radius: 10px;
  9.     box-shadow: 00010px white;
  10. }
效果如下:+ y$ R& D7 w" L7 F
5.jpg
. 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
  1. #box {
  2.   font-family: Arial;
  3.     font-size: 18px;
  4.     line-height: 30px;
  5.     font-weight: bold;
  6.     color: white;
  7.     padding: 40px;
  8.     box-shadow: 00010px white;
  9.     outline: dashed 10px#009688;
  10. }
效果如下:) a: M) G- d" l+ k! a; z9 h- M
6.jpg
/ 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
  1. #box {
  2.   font-family: Arial;
  3.     font-size: 18px;
  4.     line-height: 30px;
  5.     font-weight: bold;
  6.     color: white;
  7.     padding: 40px;
  8.     box-shadow:
  9.       0001px#009688,
  10.       0005px#F44336,
  11.       0009px#673AB7,
  12.       00010px#009688;
  13.     outline: dashed 10px#009688;
  14. }
效果如下:/ o4 S7 A0 j1 \1 q
7.jpg

- 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 \
  1. #box {
  2.   font-family: Arial;
  3.     font-size: 18px;
  4.     line-height: 30px;
  5.     font-weight: bold;
  6.     color: white;
  7.     padding: 40px;
  8.     box-shadow: 00010px#009688;
  9.     border: 10px solid #009688;
  10.     outline: dashed 10px white;
  11. }
效果如下:
5 z5 S! i, d9 D" G; X8 O+ I5 S 8.jpg
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
  1. #box {
  2.   font-family: Arial;
  3.     font-size: 18px;
  4.     line-height: 30px;
  5.     font-weight: bold;
  6.     color: white;
  7.     padding: 40px;
  8.     background:
  9.       linear-gradient(to top, #4caf50, #4caf50 10px, transparent 10px),
  10.       linear-gradient(to right, #c1ef8c, #c1ef8c 10px, transparent 10px),
  11.       linear-gradient(to bottom, #8bc34a, #8bc34a 10px, transparent 10px),
  12.       linear-gradient(to left, #009688, #00968810px, transparent 10px);
  13.   background-origin: border-box;
  14. }
效果如下:
! o; x& ?/ {8 i* g0 w* ? 9.jpg
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|paopaomj.COM ( 渝ICP备18007172号 )

GMT+8, 2024-3-29 08:28

Powered by paopaomj X3.4 © 2016-2024 sitemap

快速回复 返回顶部 返回列表