css3 实现线条两端渐变效果

最新推荐文章于 2024-09-12 17:55:30 发布

tancailian

最新推荐文章于 2024-09-12 17:55:30 发布

阅读量763

点赞数

文章标签： css3 前端 css

本文链接：https://blog.csdn.net/tancailian/article/details/129355077

版权

即一个两边细，中间宽的效果：

div代码：

<div class="box-show"> </div>

css代码：

.box-show{
    width:100%;
    border-bottom: 1px solid #56A7FB;
    border-bottom: 1px solid ;
    border-image: -webkit-linear-gradient(30deg, rgba(255,255,255,0.00) 0%,#56A7FB 20%, rgba(255,255,255,0.00) 99%) 2 2 2 2;
    border-image: -moz-linear-gradient(30deg, rgba(255,255,255,0.00) 0%,#56A7FB 20%, rgba(255,255,255,0.00) 99%) 2 2 2 2;
    border-image: linear-gradient(30deg, rgba(255,255,255,0.00) 0%,#56A7FB 20%, rgba(255,255,255,0.00) 99%) 2 2 2 2;
}

转载与https://www.jianshu.com/p/0a176325f0aa，侵权删