❌

阅读视图

发现新文章，点击刷新页面。

如何正确实现圆角渐变边框？为什么 border-radius 对 border-image 不生效？

✇掘金 前端
三十_

在项目中需要实现一个圆角渐变边框效果。

image-20251212075318921.png

我的第一反应是使用 border-radius 对 border-image。然而实践后发现 border-radius 对 border-image 不生效效果是这样的：

image-20251201193414791.png

给 div 设置了 border-radius，但边框仍然是直角。

为什么 border-radius 对 border-image 失效？

两者的工作层级不同：

  • border-radius 作用在 div 元素上，它控制的是整个 div 轮廓的圆角。
  • border-image 绘制边框，是独立于 div 之外的，是脱离于 div 的。

所以，看到的效果就是边框依然是直角，而 div 是圆角。

实现方案

主要通过两点来实现:

  • 创建一个稍大于主元素的伪元素，并设置渐变背景。
  • 使用CSS遮罩"挖空"中间部分，只留下边框区域。

代码如下：

.gradient-border-box {
    width: 100px;
    height: 100px;
    border-radius: 6px;
    position: relative;
}

.gradient-border-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 6px; /* 和主元素相同的圆角 */
    padding: 1px; /* 边框宽度 */
    
    /* 渐变效果 */
    background: linear-gradient(360deg, 
        rgba(96, 161, 250, 0.5), 
        rgba(96, 161, 250, 1));
    
    /* CSS遮罩 */
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
}

方案解析

  • 主元素: 负责内容区域和圆角，只设置 border-radius。

  • 伪元素: 负责绘制渐变边框，它的位置与大小覆盖主元素，通过：

    • background 绘制渐变
    • padding 控制边框宽度
    • mask 挖空中间区域

伪元素中的遮罩详解

mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
mask-composite: exclude;

  • -webkit-mask: 这行代码创建了两个完全相同的白色矩形遮罩，第一个仅作用于内容区域（content-box）；第二个作用域整个元素区域（border-box）。

    第一个 linear-gradient(#fff 0 0) 创建一个纯白色矩形（线性渐变，从0%到0%）；

    content-box 指定遮罩的参考框，作用域元素的内容区域（不包括padding、border）；

    第二个 linear-gradient(#fff 0 0) 创建了一个白色矩形，默认是 border-box（包括内容+padding+border）。

  • mask-composite:exclude: 控制多个遮罩如何组合，exclude 代表异或操作。

    结合遮罩解释就是: 边框区域 = border-box（整个区域） - content-box（中心区域）

❌