QQ登录

只需要一步,快速开始

APP扫码登录

只需要一步,快速开始

查看: 4312|回复: 0

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

[复制链接]

等级头衔

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

丰功伟绩

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

联系方式
发表于 2020-7-6 13:32:58 | 显示全部楼层 |阅读模式
       CSS 样式是边框最重要的一个方面,这不是因为样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有样式,将根本没有边框。
1 i* q( K8 `" s* \4 q/ o/ \, S       以下各特效用的HTML代码相同:
* P2 m; R! \8 ~/ m5 g7 c( ^1 b$ Z: M6 l
<div id="box">
  编程适合那些有不同想法的人... <br/>
  对于那些想要创造大事物并愿意改变世界的人们。
</div>

/ a4 {4 g' x1 u( s' B, \' W1. CSS动画边框
  {3 B, ~: `' i7 jCSS代码:
# D) g% b4 s4 U4 ?1 E
@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;
}
效果如下:
/ @4 i, m; O8 P4 ^( O8 S  n6 d 1.gif ) i  r; ]" I  t+ u+ t2 H3 i! l
/ l3 M. X% j% Y4 p" N! i1 S: T% i
2. CSS图像边框1 y1 N/ N6 K* n4 M
CSS代码:  T& M$ l% X  g& q6 i7 I) 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;
}
效果如下:
9 ^/ t& U# v* K% ?% h 2.jpg
& d1 I2 j/ [, k* K% `! a2 w6 _7 B/ C. d) l: [
3.CSS蛇式边框
, F, C# m# w5 n& i2 zCSS代码:
7 v) @( h' f% I$ p* w* A2 N
#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;
}
效果如下:. Q* v3 B$ D  ^, Z' u
3.jpg 3 B& R' a' |& H' `9 C& [+ o0 y

- |6 u' o7 f3 |4.CSS阶梯样式边框
0 @& X5 U& C, o& t# TCSS代码:3 j6 ]# V0 _: A" y0 C1 G
#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
}
效果如下:( F0 m5 L8 g: _  b
4.jpg 8 ]1 h: C+ U5 F* s9 z  n8 p
* c6 ~8 ^/ W4 g6 G
5.CSS只有阴影边框! f8 ^; o# M) F) j. p" u) R, z2 b
CSS代码:
! t" P: z; q" p5 P
#box {
  font-family: Arial;
    font-size: 18px;
    line-height: 30px;
    font-weight: bold;
    color: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 00010px white;
}
效果如下:
6 O! t: _/ z) L8 m+ ]. j# X 5.jpg
# T% [1 v; ?* X# a( i* i; M3 R8 b0 u" [7 b5 f, `! A: ^. h. f
6.CSS带阴影和轮廓的边框! j; }0 R, n2 c9 R5 u
CSS代码:" N6 c: i- h* y/ a' \
#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;
}
效果如下:( J4 {! l$ e' s2 H, d* `. b3 v
6.jpg
1 U  o0 Z# j4 W/ c3 D( s. A7 e' ^/ [
' |8 b2 i$ y$ o' C# ~1 M+ d. Y7.CSS少量阴影和轮廓的边框/ F8 ]+ O. P! ?; ?
CSS代码:
) |6 ]6 c  x8 r
#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;
}
效果如下:
3 x- O! E$ K. K5 T 7.jpg 9 s& Z2 r+ B5 m& V
% J9 P3 ]4 }0 V0 ?# L& K8 H; i
8.CSS带有阴影的双边框
: V7 r7 m) p; j( mCSS代码:
' T6 r' {2 Q8 c& E
#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;
}
效果如下:
( p2 `7 U* X* P 8.jpg 8 `' s4 H1 M! F4 `7 u0 ^" D0 z

/ }( V% e3 ^) z9.CSS多色边框
7 L0 i$ @: Q# f2 W. O' lCSS代码:0 S: U( G' ?6 s/ W1 p
#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;
}
效果如下:
  p" [2 k: o7 K4 k  S, Z4 A 9.jpg
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2026-6-13 14:48

Powered by paopaomj X3.5 © 2016-2025 sitemap

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