解决边框渐变色只有四个角有颜色的问题

52 阅读1分钟

设置了

        border: 1px solid transparent;
        border-image: linear-gradient(358deg, #C0E3FF 17%, rgba(192, 227, 255, 0) 85%);

但是只有四个角有很不明显的一个小点有颜色

image.png

百度了一下,原理看得有点蒙,简单理解为默认会把图片放到四个角,也就是四个角都是完整的图案,需要设置border-image-slice去切割并且拉伸整个图片

        border: 1px solid transparent;
        border-image: linear-gradient(358deg, #C0E3FF 17%, rgba(192, 227, 255, 0) 85%);
        border-image-slice: 1;

这样就ok了

image.png