设为首页收藏本站
立即注册 找回密码

QQ登录

只需要一步，快速开始

APP扫码登录

只需要一步，快速开始

手机号码，快捷登录

手机号码，快捷登录

快捷导航
  • 优惠福利
  • 美食天下
  • 旅游户外
  • 亲子乐园
  • 编程源码
  • 金典软件
  • 视频教学
  • 文档资料
  • 修改头像
  • 我的积分
  • 修改密码
  • 个人资料
  • 推广奖励
  • 改用户名
    • 泡泡马甲»泡泡马甲 › 分类导航 › 编程源码 › 几个非常绚丽的CSS样式边框特效代码
    返回列表 发新帖
    查看: 2647|回复: 0

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

    [复制链接]
    admin

    等级头衔

    积分成就    金币 : 2841
       泡泡 : 1516
       精华 : 6 篇
       在线时间 : 1294 小时
       最后登录 : 2024-11-21

    丰功伟绩

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

    联系方式
    发表于 2020-7-6 13:32:58 | 显示全部楼层 |阅读模式
    ⏹ 阅读停止中
           CSS 样式是边框最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。
      m5 C& A) Y7 T2 y$ F4 Q) L0 b' r       以下各特效用的HTML代码相同：" j- W  k( c0 f! {0 [+ s
    复制代码
    1. <div id="box">

    2.   编程适合那些有不同想法的人... <br/>

    3.   对于那些想要创造大事物并愿意改变世界的人们。

    4. </div>
    , M9 r9 Z8 E% E* ]) u
    1. CSS动画边框% Z3 b9 {" X& `8 D0 Q' S
    CSS代码：, O. V- t' g7 M7 H/ Y7 ^
    复制代码
    1. @keyframes animated-border {

    2.   0% {

    3.     box-shadow: 0000rgba(255,255,255,0.4);

    4.   }

    5.   100% {

    6.      box-shadow: 00020pxrgba(255,255,255,0);

    7.   }

    8. }

    9. #box {

    10.   animation: animated-border 1.5s infinite;

    11.   font-family: Arial;

    12.   font-size: 18px;

    13.   line-height: 30px;

    14.   font-weight: bold;

    15.   color: white;

    16.   border: 2px solid;

    17.   border-radius: 10px;

    18.   padding: 15px;

    19. }
    效果如下：
    9 v+ ^9 M) u" W% B( D& K 1.gif
    . k! j7 p5 w) E& U# T/ C! J
    ! ]/ C& c" W7 P. J5 C" [2. CSS图像边框
    ( c) z, i) p9 E' F$ ?CSS代码：( d2 n5 R1 [9 R, }& k% ]9 M2 T, i% ?
    复制代码
    1. #box {

    2.     font-family: Arial;

    3.     font-size: 18px;

    4.     line-height: 30px;

    5.     font-weight: bold;

    6.     color: white;

    7.     border: 40px solid transparent;

    8.     border-image: url(https://image.flaticon.com/icons/svg/648/648787.svg);

    9.     border-image-slice: 100%;

    10.     border-image-width: 60px;

    11.     padding: 15px;

    12. }
    效果如下：5 x, r% A! \  T, Q
    2.jpg
    0 a9 s  H" P: ~- m. C" R
    # @/ H- B. b  a% Q. H6 x4 l" ^5 E3.CSS蛇式边框. f9 e5 ]1 {! R; M
    CSS代码：
    $ g7 Y  H0 q0 M+ e3 e) a2 s
    复制代码
    1. #box {

    2.   font-family: Arial;

    3.     font-size: 18px;

    4.     line-height: 30px;

    5.     font-weight: bold;

    6.     color: white;

    7.     padding: 15px;

    8.     border: 10px dashed #FF5722;

    9.     background:

    10.     linear-gradient(to top, green, 10px, transparent 10px),

    11.     linear-gradient(to right, green, 10px, transparent 10px),

    12.     linear-gradient(to bottom, green, 10px, transparent 10px),

    13.     linear-gradient(to left, green, 10px, transparent 10px);

    14.     background-origin: border-box;

    15. }
    效果如下：
    8 {/ m% J9 Y- @/ u* f 3.jpg
    " X, u3 y8 R" S. z& b
    3 N7 u; U+ b5 ^) t2 b4.CSS阶梯样式边框* J( ~& ^; r9 s& T
    CSS代码：5 b$ C. i2 c' T; f6 T
    复制代码
    1. #box {

    2.   font-family: Arial;

    3.     font-size: 18px;

    4.     line-height: 30px;

    5.     font-weight: bold;

    6.     color: white;

    7.     padding: 40px;

    8.     box-shadow:

    9.   inset #0096880005px,

    10.       inset #059c8e0001px,

    11.       inset #0cab9c00010px,

    12.       inset #1fbdae00011px,

    13.       inset #8ce9ff00016px,

    14.       inset #48e4d600017px,

    15.       inset #e5f9f700021px,

    16.       inset #bfecf700022px

    17. }
    效果如下：. ~; b: F. k) P6 |2 y; ^- ~
    4.jpg
    ; y7 z" \: w& x0 o) z
    , q" z6 ]9 D7 Q1 G# z5.CSS只有阴影边框5 Q/ J" u* n& `4 V8 G3 i! ]
    CSS代码：
    ) F+ D( @% j! A+ [& {# m; i1 [: o
    复制代码
    1. #box {

    2.   font-family: Arial;

    3.     font-size: 18px;

    4.     line-height: 30px;

    5.     font-weight: bold;

    6.     color: white;

    7.     padding: 40px;

    8.     border-radius: 10px;

    9.     box-shadow: 00010px white;

    10. }
    效果如下：+ I5 Q- ~3 P  M1 }% d! y, N7 U
    5.jpg
    4 ]" U. Q; A, I2 O* V& X( d9 _: X0 v: a6 U
    6.CSS带阴影和轮廓的边框
    * T% L& ]7 b3 k+ A7 i- @CSS代码：! {/ b0 c: o+ g5 f. o
    复制代码
    1. #box {

    2.   font-family: Arial;

    3.     font-size: 18px;

    4.     line-height: 30px;

    5.     font-weight: bold;

    6.     color: white;

    7.     padding: 40px;

    8.     box-shadow: 00010px white;

    9.     outline: dashed 10px#009688;

    10. }
    效果如下：
    1 F( X$ c; r/ U( x 6.jpg
    7 O! e1 t2 |7 h, }, a7 F2 m3 g  ^  l+ G' w+ S' _* _4 h
    7.CSS少量阴影和轮廓的边框
    ' p/ p6 b! I' I  eCSS代码：
    5 y) o7 \5 ?: n* F  {/ p
    复制代码
    1. #box {

    2.   font-family: Arial;

    3.     font-size: 18px;

    4.     line-height: 30px;

    5.     font-weight: bold;

    6.     color: white;

    7.     padding: 40px;

    8.     box-shadow:

    9.       0001px#009688,

    10.       0005px#F44336,

    11.       0009px#673AB7,

    12.       00010px#009688;

    13.     outline: dashed 10px#009688;

    14. }
    效果如下：" `' r' q. W+ e6 v
    7.jpg : b$ g+ q: f8 o7 H' K- D4 M

    7 R1 d) U. z* h8.CSS带有阴影的双边框
    & u( R8 Y4 b: SCSS代码：: @8 Z' E' x4 }" p9 Z
    复制代码
    1. #box {

    2.   font-family: Arial;

    3.     font-size: 18px;

    4.     line-height: 30px;

    5.     font-weight: bold;

    6.     color: white;

    7.     padding: 40px;

    8.     box-shadow: 00010px#009688;

    9.     border: 10px solid #009688;

    10.     outline: dashed 10px white;

    11. }
    效果如下：2 p/ l3 G) Z0 p9 |3 p& H
    8.jpg 8 b* @; j0 v: v( H3 I( ^( t

    5 b! Y: a9 k! V5 g# Z$ P9.CSS多色边框
    % V0 j2 p+ S; ?# G0 G2 _' L6 \CSS代码：
    + \' K& L8 a5 [0 c7 x1 `6 N6 |
    复制代码
    1. #box {

    2.   font-family: Arial;

    3.     font-size: 18px;

    4.     line-height: 30px;

    5.     font-weight: bold;

    6.     color: white;

    7.     padding: 40px;

    8.     background:

    9.       linear-gradient(to top, #4caf50, #4caf50 10px, transparent 10px),

    10.       linear-gradient(to right, #c1ef8c, #c1ef8c 10px, transparent 10px),

    11.       linear-gradient(to bottom, #8bc34a, #8bc34a 10px, transparent 10px),

    12.       linear-gradient(to left, #009688, #00968810px, transparent 10px);

    13.   background-origin: border-box;

    14. }
    效果如下：
    % n. C6 R% C, B& n. S! B/ _" h1 ` 9.jpg
    边框, 特效, 样式, CSS, 绚丽

    相关帖子
    回复

    举报

    返回列表 发新帖
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

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

    GMT+8, 2024-11-22 02:43

    Powered by paopaomj X3.5 © 2016-2025 sitemap

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