QQ登录

只需要一步,快速开始

APP扫码登录

只需要一步,快速开始

查看: 4057|回复: 0

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

[复制链接]

等级头衔

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

丰功伟绩

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

联系方式
发表于 2020-7-6 13:32:58 | 显示全部楼层 |阅读模式
       CSS 样式是边框最重要的一个方面,这不是因为样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有样式,将根本没有边框。- _' Z. W4 A! s7 J1 s
       以下各特效用的HTML代码相同:% K7 k' n$ U0 ~2 U) J$ M3 s2 Y
<div id="box">
  编程适合那些有不同想法的人... <br/>
  对于那些想要创造大事物并愿意改变世界的人们。
</div>
8 Q4 {, I6 n' \6 g! N1 O; d
1. CSS动画边框0 _+ U+ S) f1 Q/ b* B: J* p
CSS代码:1 `, D! b- @$ R8 x% H. ~: S& 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;
}
效果如下:2 Y/ I& z7 i3 |2 l6 e1 |
1.gif 2 `% R5 U  D: @8 [
" c% W, t6 D& z- p0 K- n% K
2. CSS图像边框' W7 @2 G& E. E2 m# `7 Y* J* y
CSS代码:% w# k" c/ i% X; u) 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;
}
效果如下:9 l- s) |8 B% u2 j% R0 q
2.jpg ; ?8 S& s" p# I" n  \8 A8 t

; D" _  N6 B9 k5 z3.CSS蛇式边框
5 h& Z; y7 |3 I6 A% g$ vCSS代码:( C' X$ D, ?! I- m9 F' i5 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;
}
效果如下:
& m+ c; _: z6 O3 O 3.jpg ! k& s7 W/ w1 e

9 W$ W) ~6 o! |" V+ I6 q4.CSS阶梯样式边框1 `5 w1 x' x: z& a5 z2 x1 i
CSS代码:7 m  i( `! x8 Y0 h4 s
#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
}
效果如下:
2 E$ E0 d1 U) Y5 |" A4 d 4.jpg 3 Y7 A# s/ i9 M5 d' t, k

6 ~5 Y! K) G+ l( G5.CSS只有阴影边框
, \: i; B/ f  }4 RCSS代码:
+ {! ~$ B# p; K7 t+ i4 P+ l
#box {
  font-family: Arial;
    font-size: 18px;
    line-height: 30px;
    font-weight: bold;
    color: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 00010px white;
}
效果如下:
1 `$ R$ N  t( c3 E0 l+ [' i 5.jpg ) Y$ q9 k+ p; {1 G( j, ^5 }) e4 R
4 ~2 O9 d! M$ l1 ?1 {0 p
6.CSS带阴影和轮廓的边框3 l. j& P! w& n) U* @! l% t
CSS代码:
' V2 {8 Q8 |% a) d; K
#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;
}
效果如下:
6 I% M- A) {. X5 D3 R+ I 6.jpg
$ c* O1 d& u5 I1 N) p/ ~7 |& |, A' T, ?  @+ n+ E: T$ H
7.CSS少量阴影和轮廓的边框/ s) Y/ [! w9 `5 ]' p
CSS代码:
3 G. ?- Z/ z* {2 q/ a* \
#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;
}
效果如下:
* Y6 ]' v/ L5 d3 O& w" s9 N8 I 7.jpg
2 v( a/ J4 ]/ B" a8 z& W( a$ \: Q
" J5 |  ^. z1 z! l1 @& F- a( g/ q8.CSS带有阴影的双边框. x1 P% m. ^$ v6 v7 `) f0 H
CSS代码:
/ s" m; {$ Z% w4 X# ^  E- F( U
#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;
}
效果如下:
+ Y0 A. t, X. ~' r0 ?! L 8.jpg " v4 j7 n1 O; u) r; C9 K

7 y4 ?) o! g$ D2 g9.CSS多色边框
* b7 W/ k. d4 p4 z7 C( {CSS代码:! G* J: j$ u- P$ {7 |) Z0 d# ]7 [
#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;
}
效果如下:& ^3 w) a4 d0 F4 O
9.jpg
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2026-4-30 20:03

Powered by paopaomj X3.5 © 2016-2025 sitemap

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