by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12341
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、渐变边框的实现

在过去，渐变边框的主要实现方法，一是嵌套或伪元素模拟嵌套，二是使用border-image属性，相关实现在“被低估的border-image属性”一文中有介绍。

但是border-image属性实现渐变边框有个知名的弱点，那就是不支持圆角！

渐变边框

如果支持圆角，哪怕border-image属性的语法再难以理解，也还是与应用场景的。

本以为这件事情就到此为止了，没想到峰回路转，background-clip属性升级了，居然可以用来实现边框背景效果了，那自然将边框背景设置成渐变不再话下，需要用到全新的属性值 border-area.

border-area与渐变边框

例如：

<style>
canvas {
  border: 1em solid #0000;
  background: linear-gradient(deepskyblue, deeppink);
  background-origin: border-box;
  background-clip: border-area;
  border-radius: 20px;
}
</style>
<canvas></canvas>

就可以得到如下图所示的圆角渐变边框效果了：

渐变边框效果示意

效果很赞！

这里有一些细节需要说明。

当值border-area值合写的时候，background-origin属性是可以省略的，也就是：

canvas {
  border: 1em solid #0000;
  background: linear-gradient(deepskyblue, deeppink) border-area;
  border-radius: 20px;
}

但是如果分开书写，就必须设置background-origin:border-box，否则按照默认的padding-box渲染，渐变边框的效果会比较奇怪，会像下面这样。

奇怪渐变边框效果示意

兼容性

目前Chrome和Safari都已经支持边框背景图了。

border-area的兼容性示意

二、和border-shape属性配合使用

上上个月介绍了全新的CSS border-shape属性，可以轻松实现不规则边框效果，于是可以强强联合，实现不规则图形的特殊边框效果。

例如：

<style>
.star {
    width: 150px;
    aspect-ratio: 1;
    border: 10px dotted #0000;
    border-shape: polygon(
  50% 5%,
  61.8% 34.5%,
  95% 34.5%,
  68.9% 57.3%,
  79.4% 90.45%,
  50% 69.1%,
  20.6% 90.45%,
  31.1% 57.3%,
  5% 34.5%,
  38.2% 34.5%
);
  box-shadow: 2px 2px 4px #0008;
  background: conic-gradient(from -36deg, 
    deepskyblue 72deg, 
    deeppink 0 144deg, 
    rebeccapurple 0 216deg,
    orange 0 288deg,
    green 0
  ) border-area;
}
</style>
<canvas class="star"></canvas>

此时，就可以得到如下图所示的五角色值都不一样的图像效果了：

五色五角星边框效果示意

三、文本背景也规范化了

除了边框支持背景，文本也支持背景了。

实际上，在Chrome浏览器诞生之初，其就支持background-clip:text了，不过那时候还是私有特性，非Web标准。

现在迎来了好消息，自Chrome 120之后，background-clip:text无需私有前缀了，已经晋升为CSS标准属性了。

文字背景兼容性

于是乎，我们就可以将边框背景和文字背景结合起来使用，实现更加炫酷的按钮效果。

例如：

<style>
.button {
  font-size: 14px;
  padding: 6px 12px;
  border: 1px solid #0000;
  border-radius: 4px;
  color: transparent;
  background: linear-gradient(deepskyblue, deeppink) border-area text, 
    linear-gradient(#fff, #fe000005);
  &:active {
    filter: brightness(0.95);
  }
}
</style>
<button class="button">我是按钮</button>

实时渲染效果如下（需要Chrome 150+）：

Nice表情包

四、结语说明

没啥好说的，是个相当实用的特性，要是10年前出现，肯定会有很多讨论，朋友圈也可以看到相关文章的转发。

现在么，就像是路边的石头，无人问津。

最后，炫一下周末的渔获吧。

周六老鬼垂钓农家乐，特价108元8小时，钓了32斤；周日天天渔场，188元6小时，钓了七八十斤，两个鱼护。

渔获展示

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=12341

（本篇完）