QQ登录

只需要一步,快速开始

APP扫码登录

只需要一步,快速开始

查看: 3990|回复: 0

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

[复制链接]

等级头衔

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

丰功伟绩

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

联系方式
发表于 2020-7-6 13:32:58 | 显示全部楼层 |阅读模式
       CSS 样式是边框最重要的一个方面,这不是因为样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有样式,将根本没有边框。
! _. \( j1 t% Z# J- n( [* {       以下各特效用的HTML代码相同:
8 I' B  Z+ @0 Y6 F
<div id="box">
  编程适合那些有不同想法的人... <br/>
  对于那些想要创造大事物并愿意改变世界的人们。
</div>

- K( B# s) @. Q1. CSS动画边框
4 K% s) a2 }& PCSS代码:: H- E: H7 y, v4 P  |2 ^2 f
@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;
}
效果如下:
7 I2 {5 T& \! U 1.gif
3 b: u% o$ l0 P  L, S$ e, j5 b8 ]+ N: N& ^" ?
2. CSS图像边框
. m: Q* V/ S3 F" t# Z: \* JCSS代码:. P0 `2 \3 F  V" J" |! X
#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;
}
效果如下:: i8 d  \2 L- o8 }7 K' X4 K
2.jpg 4 K! u! H5 r, L7 a$ C1 [% H7 o) N

: ^8 X; X! S* @6 C3.CSS蛇式边框
& J9 U. l% e+ u# rCSS代码:( k- s3 X$ [2 K$ ?6 T4 w
#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 v! [/ O% d% Q" U1 o
3.jpg 7 o. @. o3 k" p" N$ C) d" r
, E0 y9 @/ V! I/ D0 x
4.CSS阶梯样式边框
& ]; u5 x1 R8 c% B+ NCSS代码:
0 G5 e! r* `( m3 D& 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
}
效果如下:' X0 H+ X0 w) N- b7 I' Z4 m. f
4.jpg * E( r6 r* K. g4 d0 s* Q

6 @$ W1 d0 ^  p% e1 j5.CSS只有阴影边框+ g8 l/ P3 y7 j" U# y# k
CSS代码:* T6 Z, d; h! w) {) ^  T; Z9 G
#box {
  font-family: Arial;
    font-size: 18px;
    line-height: 30px;
    font-weight: bold;
    color: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 00010px white;
}
效果如下:
& }% B( ?' a: W6 L: J6 | 5.jpg 9 L) D0 w3 X3 Z
! R: k) l' L1 j; i# F
6.CSS带阴影和轮廓的边框$ B6 o* r5 T0 z. h: N) Q& a+ q
CSS代码:
' E4 w8 K( e, h* B
#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;
}
效果如下:. C8 D$ r1 f2 M/ k
6.jpg ; d. ?$ y' y/ x. I0 H3 b

" i. e7 g, e  d6 |5 Y) s, Q% `7.CSS少量阴影和轮廓的边框
7 _, i9 K$ G( H: T# \CSS代码:
. F, I  a  ?6 |6 n5 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;
}
效果如下:
/ g" ?" k/ p$ F$ u 7.jpg # O! ]% |( z3 b: p$ C. ~
% m) [$ p, V( X( L4 l
8.CSS带有阴影的双边框
5 R% Q1 U4 T/ L" ICSS代码:
, ^) f8 Z. D% R% R# A4 A& Y( V8 h
#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;
}
效果如下:* o+ S& V, Y5 [; G0 b3 c6 Z8 J
8.jpg
; q; r) Y0 V. {$ _$ _8 Z9 Q+ K: h
: a) x+ t" {2 A, X" u9.CSS多色边框
! t3 p2 ]# b9 U6 GCSS代码:
. G# N7 E( t. l( {+ {7 c% M2 k
#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;
}
效果如下:
" T: J2 m) j  T; \; o# ? 9.jpg
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2026-4-14 00:40

Powered by paopaomj X3.5 © 2016-2025 sitemap

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