实现渐变色边框的几种办法(圆角和透明度)

实现渐变色边框的几种办法(圆角和透明度)

引用

CSDN

1.

https://m.blog.csdn.net/weixin_48798604/article/details/144980463

渐变色边框在前端开发中经常被用于制作进度条、按钮等UI元素，能够为页面增添视觉层次感和美观度。本文将详细介绍几种实现渐变色边框的方法，包括使用border-image属性和background-clip、background-origin属性的组合，以及使用图片作为边框背景的方法。

实现渐变色边框的基本方法

要实现一个具有渐变色边框的进度条（包括边框圆角以及背景需要渐变且具有透明度），可以按照以下步骤进行：

使用border-image属性

首先实现渐变色边框，可以使用border-image属性：

background: transparent;
border: 1px solid transparent;
border-image: linear-gradient(to right, rgba(3,141,254,0.7),rgba(3,253,254,0.7)) 1;  

border-image是border-image-source、border-image-slice、border-image-width、border-image-outset和border-image-repeat属性的简写。因此，border-image也可以写成：

border-image-source: linear-gradient(to right, rgba(3,141,254,0.7),rgba(3,253,254,0.7));
border-image-slice: 1;  

效果如下：（一般的边框渐变到这里就可以完成了）

实现圆角渐变色边框

然后实现圆角。但是直接添加border-radius: 5px;是不生效的，因为border-image不适用于有圆角的渐变色边框。于是我们用到了一种新的方法：

/* 设置背景剪裁区域为内边距和边框区域。 */
background-clip: padding-box,border-box;
/* 设置背景绘制区域为内边距和边框区域。 */
background-origin: padding-box,border-box;
background-image:
    linear-gradient(to right, #fff, #fff),
    /*linear-gradient(to right, transparent, transparent),*/
    linear-gradient(to right, rgba(3,141,254,0.7),rgba(3,253,254,0.7));  

这种方法的底层逻辑相当于嵌套了一个小的div在大的div里，他们分别有自己的背景色，小的是单色背景，大的是渐变色。因此即使将小背景改为透明色，也不能够继承到父元素的渐变透明背景。

因此，可以使用一种精简的写法，把小div的背景改为一个最接近设计图渐变的纯色：

background-image:
    linear-gradient(to right, #094983, #094983),
    /* linear-gradient(to right, #fff, #fff),*/
    linear-gradient(to right, rgba(3,141,254,0.7),rgba(3,253,254,0.7));  

然后加上里面的渐变色的进度条：

子元素：
background: linear-gradient(to right,rgba(3,141,254,0.7),rgba(3,253,254,0.7));
border-radius:5px;  

透明背景的div的渐变边框

对于透明背景的div的渐变边框，可以使用图片作为边框背景：

border-image: url("./svg边框.svg") 1 round stretch;  

这种方法借鉴于：使用border-image实现渐变边框_border-image边框渐变-CSDN博客。可以找UI设计师单独给边框切图。

如有其他方法，欢迎交流。