css实现圆角+边框渐变+背景半透明

秋天爱美丽2025-08-17 18:06

ui小姐姐经常搞一些花里胡哨的东西，圆角+边框渐变+背景半透明，虽然每个都可以弄，但是合在一起真的不好弄，主要是因为通过border--image设置的边框渐变，无法使用圆角，下面是自己搜索整理的一些可以的方案。

方式1：使用background-clip，然后绘制多个背景图:

css 复制代码

.element1{
    width:200px;
    height:200px;
    box-sizing: border-box;
    border-radius: 20px;
    border:5px solid transparent;
    background-origin: border-box;
    background-clip: content-box,content-box,border-box;
    background-image:linear-gradient(to right,rgba(255,0,0,.4),rgba(0,255,255,.5)),linear-gradient(#fff,#fff),linear-gradient(45deg, #ff7e5f, #feb47b, #86e3ce, #d4a5a5);
}

这种方法有个问题，就是如果下面是图片的话，无法穿透图片，效果如下：

因此如果你不需要显示底图的话，可以使用这种方式。

方式2：使用mask

css 复制代码

.element {
    width: 200px;
    height: 200px;
    border-radius: 20px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right,rgba(255,0,0,.4),rgba(0,255,255,.5));
}

.element::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    border: 2px solid transparent;
    box-sizing: border-box;
    background: linear-gradient(45deg, #ff7e5f, #feb47b, #86e3ce, #d4a5a5);
    -webkit-mask: 
        linear-gradient(red 0 0) content-box, 
        linear-gradient(red 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}

这种失效的效果是可以的，可以穿透显示后面的背景，效果如下：

这种方式的话，稍微复杂一些，需要使用两个蒙层，然后计算去除蒙层重叠的部分。