具有渐变和半径的边框

^{在css-tip.com上了解更多 CSS 技巧}

我们都知道该属性border-image允许我们添加任何类型的图像（包括渐变）作为边框。

.box {
  border: 10px solid;
  border-image: linear-gradient(45deg,red,blue) 10;
}

不幸的是，border-radius不支持，border-image而且很难找到技巧来获得具有渐变的圆形边框。

这里有一个技巧可以实现这样的效果。无需复杂的代码，无需 SVG，也无需多个元素！只需两行使用该mask属性的 CSS 代码即可。

.box {
  border-radius: 50px; /*1*/
  border: 10px solid transparent; /*2*/
  background: linear-gradient(45deg,red,blue) border-box; /*3*/
  mask: /*4*/
    linear-gradient(#000 0 0) padding-box, 
    linear-gradient(#000 0 0);
  mask-composite: exclude; /*5*/
}

解释

(1)(2)：这些代码很简单。
(3)：我们应用渐变作为背景，并将其原点设为边框（默认情况下是填充框）。
(4)：使用该mask属性，我们应用两个不透明图层。底层将覆盖整个元素，顶层将仅覆盖填充框（因此它不会覆盖边框区域）。
(5)：我们将顶层从底层中排除，这样就只显示边框区域了！

就是这样！

现在你可以根据需要调整边框、渐变和半径。唯一的缺点是这会遮盖内容，所以我们可以将代码移到伪元素中。

.box {
  position: relative;
}
.box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50px; 
  padding: 10px; 
  background:linear-gradient(45deg,red,blue); 
  mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  mask-composite: exclude; 
}

我用填充替换了边框以使代码更短，但逻辑保持不变：我们将内容区域从填充区域中排除，因此只有填充保持可见

或者

文章来源：https://dev.to/afif/border-with-gradient-and-radius-387f