找回密码
 注册账号

QQ登录

只需一步,快速开始

《泰拉瑞亚下载-1.4.2.3版》 泰拉瑞亚服务器 - MOD模组下载

入驻泰拉战网 新手指引 - 升级 - 师徒

泰拉瑞亚合成表 泰拉卡牌 - 泰拉江湖 - 泰拉刺客

联系泰拉开发组👈进入 积分市场 - 房产交易 - 水晶获取

查看: 2552|回复: 0

[CSS] 纯CSS3边框代码集合

[复制链接]

431

主题

77

回帖

8

广播

论坛版主

积分
214
泰拉
0
水晶
10
铜钥匙
0
银钥匙
0
金钥匙
0

【江湖新秀】【宝剑回鞘】【泰拉达人】【奥运选手】

发表于 2021-3-9 11:34:28 | 显示全部楼层 |阅读模式

半透明边框
透明边框.jpg

  1. border:10px solid hsla(0, 0%, 100%,.5);
  2. background-clip:padding-box;
复制代码




缝边效果
缝边效果.jpg

  1. outline: 1px white dashed;
  2. outline-offset:-10px;
  3. border-radius:4%;
  4. background:#795548;
复制代码


边框内圆角 可用于图标展示
内边圆角.jpg

  1. border-radius:10px;
  2. background: tan;
  3. outline:10px solid #655;
  4. box-shadow:0 0 0 5px #655;
复制代码


信封边框
信封边框.jpg

  1. padding:1em;
  2. border: 1em solid transparent;
  3. background: linear-gradient(white,white) padding-box,repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0/5em 5em;
复制代码


注脚效果
注角效果.jpg

  1. padding-top:1em;
  2. border-top: .2em solid transparent;
  3. border-image: 100% 0 0 linear-gradient(90deg,currentColor 4em,transparent 0);
复制代码


动画蚂蚁线
蚂蚁线动画边框.jpg

  1. @keyframes ants{100%{background-position:100%;}}
  2. div{
  3. width:200px;
  4. height: 70px;
  5. border: 1px solid transparent;
  6. background: linear-gradient(white,white) padding-box,repeating-linear-gradient(-45deg, black 0, black 25%, white 0, white 50%) 0/.6em .6em;
  7. animation:ants 12s linear infinite;
  8. }  
复制代码
[发帖际遇]: 一个袋子砸在了 mickeyort 头上,mickeyort 赚了 1 泰拉. 幸运榜 / 衰神榜
您需要登录后才可以回帖 登录 | 注册账号

本版积分规则

QQ|友链申请|Archiver|手机版|小黑屋|游芯沙盒 ( 陕ICP备11006283号-1 )

GMT+8, 2024-3-28 21:22 , Processed in 0.158656 second(s), 40 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

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