QQ登录

只需要一步,快速开始

APP扫码登录

只需要一步,快速开始

查看: 4114|回复: 0

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

[复制链接]

等级头衔

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

丰功伟绩

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

联系方式
发表于 2020-7-6 13:32:58 | 显示全部楼层 |阅读模式
       CSS 样式是边框最重要的一个方面,这不是因为样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有样式,将根本没有边框。9 \4 O: x. r: q% v
       以下各特效用的HTML代码相同:
' U( V& \& e- \1 m! r) m2 V6 ?
<div id="box">
  编程适合那些有不同想法的人... <br/>
  对于那些想要创造大事物并愿意改变世界的人们。
</div>
( M" {: y" K2 Y! m6 f" }2 e6 P
1. CSS动画边框
" F* X  n! R  l* TCSS代码:8 Y; t! \% U  O/ m: u* 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;
}
效果如下:8 a# C- Y, K& E
1.gif
1 o+ u' c& _$ B
7 Y- b: t( l& |9 b+ ^: f2 V7 G2. CSS图像边框
, H, ]. w5 S1 F1 n3 eCSS代码:
4 q/ n/ O- _% O* Y
#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;
}
效果如下:7 Z! y/ v! S, @: O9 _  b
2.jpg / R: b$ J9 x3 b  }* ^2 |3 M
, d; ^9 {0 V0 O6 x& r* v
3.CSS蛇式边框2 I* t% e) }, f5 W2 X) @: C
CSS代码:# G. K2 R1 B6 R  U% i4 w0 v% E, {
#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;
}
效果如下:' s0 z( U5 S% J, [+ x
3.jpg
7 ^  e2 z, ~. R% R
% c0 @$ \% r6 T0 o# v) @4.CSS阶梯样式边框
" d2 w! C  J2 E0 c4 Y6 zCSS代码:
" s6 ?8 W( M3 A* s( w1 K' b$ x
#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
}
效果如下:
/ J# e$ Y% Z6 |: a+ Z 4.jpg ! b* L; ^# t  l* S. J* G; l: s

* a0 |. e; `% g: h  D' T. t% k5 m5.CSS只有阴影边框
3 K7 I, ?- O# N! J" JCSS代码:
) r! t+ h/ d5 T6 \
#box {
  font-family: Arial;
    font-size: 18px;
    line-height: 30px;
    font-weight: bold;
    color: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 00010px white;
}
效果如下:7 z# g& o, _  \6 y
5.jpg 8 g! @9 F8 }* C# L" U3 x: @& U
& [) b) e  J& |3 ~$ x
6.CSS带阴影和轮廓的边框
) q& H" e' S8 k3 f* BCSS代码:
3 Z% V2 W9 f5 N$ b0 N# l$ _, J
#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;
}
效果如下:
! M, E' M# m( |! t5 v' h& H- t  e 6.jpg
& A; K/ W+ ]6 d$ k0 A& a. G. c
0 {, S6 S. J/ O; [) q1 v( X7.CSS少量阴影和轮廓的边框. f, p, ?2 Q" ^+ {# j* R
CSS代码:
& t6 ^- C( i4 |# x( p6 h
#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;
}
效果如下:- W. P7 M- z. N) N7 S7 P
7.jpg 3 x" [$ Q5 n/ [6 E

  X: [" e6 j5 N  N0 [+ Y8.CSS带有阴影的双边框
9 o  Q8 `) [+ V/ b3 kCSS代码:
: M6 Q3 f7 @6 c; u5 b2 L" L  V
#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;
}
效果如下:# u0 |' G+ L1 D' I
8.jpg " F9 T! M  A: s( Z' i9 i1 t
5 U* R& w. r  V1 Z- q7 {
9.CSS多色边框
3 m7 v5 m# I! P' G2 R: K( MCSS代码:  v+ o+ x  k7 G# q7 J% v$ T
#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;
}
效果如下:% s9 d% s4 ?8 B0 b! E# _
9.jpg
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2026-5-11 06:41

Powered by paopaomj X3.5 © 2016-2025 sitemap

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