QQ登录

只需要一步,快速开始

APP扫码登录

只需要一步,快速开始

查看: 4065|回复: 0

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

[复制链接]

等级头衔

积分成就    金币 : 2861
   泡泡 : 1516
   精华 : 6
   在线时间 : 1327 小时
   最后登录 : 2026-4-23

丰功伟绩

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

联系方式
发表于 2020-7-6 13:32:58 | 显示全部楼层 |阅读模式
       CSS 样式是边框最重要的一个方面,这不是因为样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有样式,将根本没有边框。
7 n- ~0 O0 i, f; a  ?; q       以下各特效用的HTML代码相同:
* r3 l' m$ _8 W/ t4 K: ?5 w
<div id="box">
  编程适合那些有不同想法的人... <br/>
  对于那些想要创造大事物并愿意改变世界的人们。
</div>
& K  w( }3 ^) E$ W. e, j8 T
1. CSS动画边框2 G% T6 w7 n- P( t5 x5 i
CSS代码:
6 f1 g; `- z  P4 R
@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;
}
效果如下:* O/ b* Y$ k& C3 f% K2 j
1.gif
# G2 ?$ O( r5 _* d% p
4 {( s! N2 H2 G+ i- V: b2. CSS图像边框
2 p' K9 E, v  _9 MCSS代码:0 p* V( x, _$ H- ^! A9 L8 F6 j2 f9 g
#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;
}
效果如下:" _0 I+ l, l( |  ]
2.jpg 1 Z$ [3 S) _8 I7 G; x+ r
# m' o& b5 \) C" i+ @1 b6 m6 m
3.CSS蛇式边框7 u6 `: K" M% v. j% j
CSS代码:
+ f  q7 ?9 `5 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;
}
效果如下:
6 C' W7 w3 M6 y$ \ 3.jpg
) B5 ~5 G7 F* @! [3 j  v* F" D# K! S
+ @7 X% ~! w. V5 K) u! p4.CSS阶梯样式边框5 F6 R+ E4 A8 t% U' {* ~$ @
CSS代码:( m; o) w2 U+ O2 u  O7 `5 K2 z$ c
#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
}
效果如下:  a9 w/ A9 h/ V9 k+ V; I* q0 R# W
4.jpg
1 `7 [, _, M9 O. \9 ^' W6 ^7 x/ Y' [  K' R& }' C
5.CSS只有阴影边框
( ?% p+ R+ v/ G5 T% Q+ _( p+ _CSS代码:
" l1 H8 e3 w. z& \$ u% ?$ I  H
#box {
  font-family: Arial;
    font-size: 18px;
    line-height: 30px;
    font-weight: bold;
    color: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 00010px white;
}
效果如下:) @, c- d$ [# Q2 B5 I
5.jpg
/ P+ J) Y, Y2 D; B4 n% G' E6 h! o: K1 T: e: o& Q
6.CSS带阴影和轮廓的边框# \  c" a7 w. k5 F% u
CSS代码:
" o1 ]3 Y/ d9 K2 b; L  a" W/ Z
#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;
}
效果如下:
1 `3 ^9 C* F# R3 B! \; f 6.jpg & K2 k+ F5 M2 [3 w/ j0 x
; L! |9 q5 ]# X8 y8 b6 [6 }
7.CSS少量阴影和轮廓的边框* K4 H7 d+ a5 q- A7 Y
CSS代码:
% J3 ]/ u0 E* D
#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 C7 `# Y( V8 z+ w
7.jpg 5 B1 E  G  S1 u6 k' ~- S: x7 C

# ]/ ?5 B# V3 Y" A0 L7 C8.CSS带有阴影的双边框. G+ v+ E* B: ?' N5 D
CSS代码:
: N9 _/ R2 [: ]* J& @* 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;
}
效果如下:" P( h/ }' G" C6 z
8.jpg
" y' Y: o$ Q3 [8 S3 q
" _  {+ d  l; X" e+ H9.CSS多色边框7 t- I: v: l8 w& L. k
CSS代码:3 u  m$ i0 s( B- u9 C6 A
#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) `0 ~) L- [% U
9.jpg
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2026-5-2 10:34

Powered by paopaomj X3.5 © 2016-2025 sitemap

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