从border-image 到 mask + filer 实现圆角渐变边框

用 CSS Mask + Filter 实现高级渐变圆角边框

前言

故事开始于一张恶心人的设计UI稿开始，由于签了保密协议，只能切割设计稿，展示恶心的片段； 最近手头刚好有个大屏的项目，我们的设计师，于是乎，搞出了如下片段：

各位jym，你们想到哪些方案呢？评论区见！ 最简单省事粗暴的方案，就是UI直接给切图，但俺们是有追求的（其实以前也干过），性能要有要求的于是乎采用以下方案实现！

前面2张图很好实现，border-image 渐变既可以很好实现； 后面三张设计图，是有圆角的，border-image 无法实现圆角，border-radius 可以实现圆角但无法实现渐变边框；

故事主角出现了mask + filter

图一：border-image：linear-gradient(90deg, #038AFE 0%, rgba(3, 138, 254, 0.3) 48%, #038AFE 100%) 0.5

图二：border-image: linear-gradient(90deg, #12c1ea 0%, rgba(3, 138, 254, .3) 50%, #12c1ea 100%) 1 1;

图三：

.mask{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 0;
}

.mask::after{
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 174, 255, 0.25) 0%, #00AEFF 100%);
    filter: blur(10px);
    z-index: 0;
}

图四：跟图三其实一样的，只是伪类的高度设置不一样

.mask::after{
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    height: 80%;
    background: linear-gradient(180deg, rgba(0, 174, 255, 0.25) 0%, #00AEFF 100%);
    filter: blur(10px);
    z-index: 0;
}

图五：遮罩层都一样，不一样的是伪类，渐变色设置的技巧

.mask::after{
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    height: 80%;
    background: linear-gradient(180deg, #00AEFF 0%, rgba(1, 179, 255, 0) 19%, rgba(1, 179, 255, 0) 77%, #00AEFF 96%);
    filter: blur(10px);
    z-index: 0;
}

核心概念

CSS Mask 属性

mask 属性允许我们使用图像、SVG 或渐变作为遮罩，控制元素的可见区域。它的工作原理类似于 Photoshop 中的遮罩层。

基本语法：

mask: <mask-source> <mask-mode> <mask-position> / <mask-size> <mask-repeat> <mask-origin> <mask-clip> <mask-composite>;

其中，mask-composite 属性定义了多个遮罩层如何组合。对于实现渐变边框，我们主要使用 exclude 值，它会显示两个遮罩层的非重叠区域。

CSS Filter 属性

filter 属性用于对元素应用图形效果，如模糊、对比度、亮度等。我们可以结合 filter 来增强渐变边框的视觉效果。

常用 filter 函数：

函数名	描述	示例
blur()	模糊效果	blur(10px)
contrast()	对比度调整	contrast(150%)
brightness()	亮度调整	brightness(120%)
saturate()	饱和度调整	saturate(200%)
opacity()	透明度调整	opacity(0.8)

实现方法

方法一：基础 Mask 渐变边框

核心思路： 使用两层渐变遮罩，通过 mask-composite: exclude 实现边框效果。

<div class="gradient-border basic">
    <h3>基础渐变边框</h3>
    <p>使用 mask-composite: exclude 实现</p>
</div>

.gradient-border.basic {
    /* 背景渐变 */
    background: linear-gradient(45deg, #96ceb4, #ffeead, #ff6b6b);
    
    /* 遮罩 */
    mask: 
        /* 内层遮罩：白色矩形，大小与元素相同，有圆角 */
        linear-gradient(#fff 0 0) content-box,
        /* 外层遮罩：白色矩形，大小与元素相同 */
        linear-gradient(#fff 0 0);
    /* 设置遮罩属性 */
    mask-composite: exclude;
    /* 内边距，控制边框宽度 */
    padding: 6px;
}

效果说明： 内层遮罩显示元素内容区域，外层遮罩显示整个元素，通过 exclude 组合，只显示两层遮罩的非重叠区域，即边框部分。

方法二：伪元素 + Mask

核心思路： 使用伪元素创建渐变背景，通过 mask 属性控制显示区域。

<div class='demo'>
    <div class="gradient-border pseudo-element">
        <h3>伪元素 + Mask</h3>
        <p>使用 ::before 伪元素创建渐变背景</p>
    </div>
</div>

.demo {
    position:relative;
}
.gradient-border.pseudo-element {
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    border: 1px solid transparent; 
    border-radius: 10px; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); 
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude; z-index: 0;
}

.gradient-border.pseudo-element::before {
    content: ''; 
    position: absolute; 
    bottom: -1px; 
    left: -1px; 
    right: -1px; 
    top:-1px;
    background: linear-gradient(180deg, rgba(0, 174, 255, 0.25) 0%, #00AEFF 100%); filter: blur(10px);
    z-index: 0;
}

效果对比

实现方式	特点	适用场景
基础 Mask	简洁、性能好	简单渐变边框需求
伪元素 + Mask	灵活、易于控制	需要复杂边框样式

浏览器兼容性

CSS Mask 属性的浏览器支持情况如下：

浏览器	版本
Chrome	85+
Firefox	70+
Safari	15+
Edge	85+

对于不支持 mask-composite: exclude 的浏览器，我们可以使用 -webkit-mask-composite: xor 作为替代：

.gradient-border {
    mask-composite: exclude;
    /* Safari 兼容性 */
    -webkit-mask-composite: xor;
}

最佳实践

1. 选择合适的实现方式：根据需求和浏览器支持情况，选择最适合的实现方式。
2. 性能优化：避免在大量元素上同时使用复杂的 mask 和 filter 效果，这可能会影响页面性能。
3. 降级方案：为不支持 mask 属性的浏览器提供降级样式，例如使用传统的 border 或伪元素方法。
4. 渐变颜色选择：选择对比度适中、和谐的渐变颜色，避免过于刺眼的颜色组合。
5. 边框宽度：边框宽度不宜过宽，一般建议在 2-8px 之间，这样视觉效果最佳。

总结

使用 CSS 的 mask 和 filter 属性实现渐变圆角边框是一种高级且灵活的方法，它具有以下优点：

1. 代码简洁：相比传统的嵌套元素或复杂伪元素方法，代码更加简洁和易于维护。
2. 效果丰富：可以实现多种高级效果，如毛玻璃边框、动态渐变边框等。
3. 灵活可控：可以通过调整 mask 属性和 filter 属性，精确控制边框的外观和效果。
4. 性能优良：相比 JavaScript 实现的动态边框，CSS 实现的性能更好。

虽然 mask 属性的浏览器支持还不是 100%，但在现代浏览器中已经得到了很好的支持。通过提供适当的降级方案，我们可以在项目中安全地使用这种方法。

希望本文对你理解和使用 CSS Mask + Filter 实现渐变圆角边框有所帮助！如果你有任何问题或想法，欢迎在评论区留言讨论。

参考资料

• MDN Web Docs - mask
• MDN Web Docs - filter
• CSS-Tricks - Masking in CSS