QQ登录

只需要一步,快速开始

APP扫码登录

只需要一步,快速开始

查看: 3757|回复: 0

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

[复制链接]

等级头衔

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

丰功伟绩

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

联系方式
发表于 2020-7-6 13:32:58 | 显示全部楼层 |阅读模式
       CSS 样式是边框最重要的一个方面,这不是因为样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有样式,将根本没有边框。9 q$ U2 T) ~3 H' c% ^: b% M
       以下各特效用的HTML代码相同:+ x- ]" v: ]2 n5 F: ~% s
<div id="box">
  编程适合那些有不同想法的人... <br/>
  对于那些想要创造大事物并愿意改变世界的人们。
</div>
! i; m% Y/ c. X
1. CSS动画边框: H# Z: z) ]0 }/ e5 `
CSS代码:- k3 L8 n8 X8 e; Z( d
@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;
}
效果如下:- Q: h, X8 V( h0 h' Q' n/ g
1.gif
+ g* [% W4 i6 ^) x) @. o1 A( P$ B' \, M0 d5 u/ [
2. CSS图像边框+ C6 h/ C: Z  E3 i& C+ e1 n
CSS代码:" s6 d+ F0 n0 P& k' T* C1 R- S
#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;
}
效果如下:/ H2 j7 Z  b, R9 A8 z
2.jpg & P8 J5 H8 S" @1 @) `% v( @

1 @# h( A6 V9 ~+ P) \3.CSS蛇式边框
# O# L; C/ l+ e6 p7 GCSS代码:$ r( P& n6 F1 C9 M3 \
#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;
}
效果如下:
2 r$ ]/ p; \( m! _* r( A0 F9 A% g4 T7 `- y 3.jpg
) A/ J+ b; l% |, {7 B, A) t6 T! }# C* K  ^, M9 e
4.CSS阶梯样式边框2 c8 ~* P3 X3 m  H4 I9 k/ T: {
CSS代码:" M: d9 b; ~$ V& K- e
#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
}
效果如下:) }, S5 N, \5 s" H
4.jpg 1 C+ q, Z$ z( O- l

. ?, p3 q  g0 M5.CSS只有阴影边框8 W4 P, q2 |" y# W
CSS代码:. B. f, ^& r6 _2 z% p, V' E
#box {
  font-family: Arial;
    font-size: 18px;
    line-height: 30px;
    font-weight: bold;
    color: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 00010px white;
}
效果如下:
: G: L' {) Y: e. s, L; w 5.jpg 7 V+ Z5 R, Q( a! m) n4 s7 W

/ f) J' O$ Z- o6.CSS带阴影和轮廓的边框4 n1 ]5 N  o& s$ B$ r
CSS代码:
" e. A# }: D! i1 e4 e$ g& q
#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;
}
效果如下:$ f) v/ e: q7 N, m1 g
6.jpg , M1 b8 I/ S. j  F

: x8 \) @/ N8 H8 O) v: ~7.CSS少量阴影和轮廓的边框$ n# G; }$ n+ n+ y$ c
CSS代码:
9 D1 N& X+ Z5 Q! ~8 y  c8 ]0 s1 l
#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;
}
效果如下:9 U. P$ F5 u/ ?( k8 P
7.jpg
' p: v) |8 Z1 }2 v6 T/ L2 L! Q: L4 f# F  `
8.CSS带有阴影的双边框
6 e- f- w2 m! h: @+ B" q, ~CSS代码:) Z. |$ f9 _4 w4 O' k. ]' P# S
#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;
}
效果如下:. r: q6 \) ]: {( |4 A5 V- y. H; T
8.jpg 7 `1 k) F- v7 ~# c
) K% F; T2 I$ G
9.CSS多色边框
$ R5 s4 c. V8 l) L4 [8 }+ PCSS代码:* I4 \7 a. \1 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;
}
效果如下:* {# O( l7 h" ~+ d5 h
9.jpg
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2026-1-17 15:02

Powered by paopaomj X3.5 © 2016-2025 sitemap

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