css border实现渐变

最新推荐文章于 2024-07-22 13:45:23 发布

Ka、

最新推荐文章于 2024-07-22 13:45:23 发布

阅读量1w

点赞数 3

本文链接：https://blog.csdn.net/weixin_40463469/article/details/105338850

版权

css border某一条边设置渐变

1、border某一条边渐变

background-clip:padding-box,border-box;
background-origin:padding-box,border-box;
background-image:linear-gradient(135deg,#000,#000),linear-gradient(135deg,#E70303,#FFFF44);
border-bottom:2px transparent solid;

使得border边框渐变。需要注意的是，方法实现原理其实是使得整个background渐变，background-image中第一段的linear-gradient使得div里的渐变色覆盖成黑色，从而保留border上的渐变色。
2、border渐变

.content { width: 100px; height: 100px; border:10px solid #ddd; border-image: -webkit-linear-gradient(red,yellow) 30 30; border-image: -moz-linear-gradient(red,yellow) 30 30; border-image: linear-gradient(red,yellow) 30 30; }