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

[复制链接]
发表于 2024-7-25 22:05:48 | 显示全部楼层 |阅读模式

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

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

×
结果:

  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企服之家,中国第一个企服评测及商务社交产业平台。
继续阅读请点击广告
回复

使用道具 举报

© 2001-2025 Discuz! Team. Powered by Discuz! X3.5

GMT+8, 2025-7-9 10:13 , Processed in 0.075436 second(s), 29 queries 手机版|qidao123.com技术社区-IT企服评测▪应用市场 ( 浙ICP备20004199 )|网站地图

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