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

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

主题 844|帖子 844|积分 2532

结果:

  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 立即注册

本版积分规则

金歌

金牌会员
这个人很懒什么都没写!

标签云

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