QQ登录

只需要一步,快速开始

APP扫码登录

只需要一步,快速开始

查看: 3917|回复: 0

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

[复制链接]

等级头衔

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

丰功伟绩

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

联系方式
发表于 2020-7-6 13:32:58 | 显示全部楼层 |阅读模式
       CSS 样式是边框最重要的一个方面,这不是因为样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有样式,将根本没有边框。2 b' I6 `1 ]/ X9 P* `
       以下各特效用的HTML代码相同:6 f! A; g+ I( w. b# j+ B
<div id="box">
  编程适合那些有不同想法的人... <br/>
  对于那些想要创造大事物并愿意改变世界的人们。
</div>

% |) D4 K; {- o. @# m. i1. CSS动画边框
9 L6 Q. A4 ^) N3 ^CSS代码:2 ]8 V  M- r( `% T
@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;
}
效果如下:; u! g# h5 G3 _% p0 Q
1.gif
4 r! r: T0 I1 s$ @  X* Z- M
) m! t$ I+ ^0 A, ^2. CSS图像边框
/ {9 i9 \8 y7 R, [9 `CSS代码:' `+ ?/ m5 j" S) ]& F
#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;
}
效果如下:4 o& ]% l/ H, N' _0 b2 R
2.jpg 9 ~: f' Z# B' i: `& G% g4 P

: f0 K; c2 @% g/ F6 x8 P0 ?. I3.CSS蛇式边框. I5 d+ \; @' r
CSS代码:
- L* H9 }' |5 E* @+ z
#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;
}
效果如下:5 W* q  Q5 ^4 i
3.jpg $ `4 q# z& ~' s( G0 N4 L* {

3 v% l( W* ]/ D/ k4.CSS阶梯样式边框$ k) d6 f4 U7 v8 y8 k) r
CSS代码:& p% W1 F1 h- A" L3 H/ D. d
#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
}
效果如下:
: F4 P, w; o( @7 O* ` 4.jpg * g+ \( d/ W! i" s8 A) f. l2 t; M
/ _! a4 k$ f7 N0 F+ ]
5.CSS只有阴影边框
7 G2 g, @. I( m) z- ^) O* y: I1 h9 kCSS代码:
7 I' j6 k8 \2 H0 ?
#box {
  font-family: Arial;
    font-size: 18px;
    line-height: 30px;
    font-weight: bold;
    color: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 00010px white;
}
效果如下:
# y0 ?; Q& o6 J6 L% n# } 5.jpg 0 h. S5 r  b7 K8 H0 i
; z5 z8 g3 b) I) K) k# u2 P
6.CSS带阴影和轮廓的边框
4 w  Z* u# u! ~. e; U) ~. uCSS代码:. v( X4 S; m! U
#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;
}
效果如下:9 b; W0 Z% r1 f1 u" B1 Q
6.jpg ( \( M. m, o& `% k* u% T
! n6 q. h; x: q- w* c
7.CSS少量阴影和轮廓的边框" r4 t/ n# e% F1 E6 a7 `* K
CSS代码:
. D' m6 U( U2 T
#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;
}
效果如下:
5 `, h$ C9 t' C% Y  H 7.jpg % ~7 Z$ p+ x0 k( C

. s9 ^# e, b4 }: @$ z8 X) o8.CSS带有阴影的双边框8 _9 f$ @8 P5 H# }6 A; S3 A' e
CSS代码:0 H% A3 y- B+ J/ o8 P& F
#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;
}
效果如下:& |9 u! c& {4 Q* W
8.jpg 6 j2 m0 ~. x! o/ u8 S# v; S

. v$ ~' k- Z# F: |4 i9.CSS多色边框5 u; |# B9 y, i$ y! y
CSS代码:
) u" i) l  \  p1 V) I3 q
#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;
}
效果如下:
& w( X" P& v0 A# P% s, e 9.jpg
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2026-3-19 17:06

Powered by paopaomj X3.5 © 2016-2025 sitemap

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