css 实现圆形渐变边框

要实现一个圆形渐变边框很简单，只需要为这个元素设定一定的 padding ，background 设置为 #fff，然后利用background-clip 将背景裁剪到内边距框，那么padding 的值就是边框的值，然后再设置这个元素的伪元素渐变背景即可达成效果。效果如下：截屏2021-11-02 下午10.13.17.png

在线实例查看

在上述例子中，页面背景色和这个元素的背景色都设置了#fff ，一旦页面的背景色不是白色的话，元素的白色背景就原形毕露了。效果如下：

截屏2021-11-02 下午10.19.39.png

那么有其他的方法可以实现这种镂空效果吗，答案一定是有的！css mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域，听起来好像就挺有戏的样子😄。

mask 的原理

mask 可以是 css 渐变，也可以是图片或者 svg，透明度为0的部分不可见，透明度为1的部分可见。

具体实现

首页利用linear-gradient 实现渐变背景，代码及效果如下：

<div class="pie"></div>

.pie {
  width: 200px;
  height: 200px;
  margin: 40px;
  border-radius: 50%;
  background-image: linear-gradient(45deg, red, transparent, yellow);
}

下载.png

接下来我们再绘制一个同等大小的 svg 圆形，代码如下：

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" version="1.1">
  <circle cx="100" cy="100" r="96" stroke="black" stroke-width="4" fill="transparent"/>
</svg>

因为遮罩透明度为0的部分不可见，所以需要将fill 设置为transparent ，stroke 设置任意不透明的颜色即为可见。对.pie 元素应用该遮罩即可达到最终效果。

值得注意的是，下面的-webkit-mask-image 的值是对上述 svg 进行 base64 转码后的值。

.pie {
   -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRo%0APSIyMDAiIGhlaWdodD0iMjAwIiB2ZXJzaW9uPSIxLjEiPgogIDxjaXJjbGUg%0AY3g9IjEwMCIgY3k9IjEwMCIgcj0iOTYiIHN0cm9rZT0iYmxhY2siIHN0cm9r%0AZS13aWR0aD0iNCIgZmlsbD0idHJhbnNwYXJlbnQiLz4KPC9zdmc+);
   -webkit-mask-size: 100%;
   -webkit-mask-position: 0;
   -webkit-mask-repeat: no-repeat;
}

截屏2021-11-02 下午10.13.17.png

参考链接