css实现线条中间高亮,左右两边模糊(linear-gradient的运用) ...

金歌  论坛元老 | 2024-7-25 22:05:48 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题

主题 1059|帖子 1059|积分 3177

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

x
结果:

  1. <div class="line"></div>
复制代码
  1. .line {
  2.   height: 1px;
  3.   background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #a9c2ff 50%, rgba(255, 255, 255, 0) 100%);
  4.   border-radius: 4px 4px 4px 4px;
  5. }
复制代码
CSS实现边框底部渐变色的方法最简朴的一种)


  1. .item-box {
  2.     border-bottom: 1px solid;
  3.     border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #00bbf2 20%, rgba(255, 255, 255, 0) 100%);
  4.     border-image-slice: 1;
  5. }
复制代码
 参考文章:
CSS实现边框底部渐变色的4种方法_css下边框渐变-CSDN博客

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

金歌

论坛元老
这个人很懒什么都没写!
快速回复 返回顶部 返回列表