CSS 掩码/-webkit-mask 在 safari 中不起作用

问题描述

我有一个项目，我尝试绘制一个带有渐变边框的圆。我已经做到了，所以它可以在 Chrome 中使用。但是样式在 safari 中不起作用。我不知道为什么它不起作用。我为 Safari 添加了 mask: 版本。

.gradient-circle {
  height: 10rem;
  width: 10rem;

  --b: 5px;
  /* border width*/
  display: inline-block;
  margin: 10px;
  z-index: 0;
  position:relative;
}

.gradient-circle:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--c,linear-gradient(to top,#5454d4,rgba(249,116,104)));
  mask: linear-gradient(0deg,#fff,transparent 96%),radial-gradient( farthest-side,transparent calc(100% - var(--b) - 1px),#fff calc(100% - var(--b))) content-Box;
  -webkit-mask: linear-gradient(0deg,#fff calc(100% - var(--b))) content-Box;
  mask-composite: intersect;
  -webkit-mask-composite: destination-in;
  border-radius: 50%;
  padding: 1px;
}

<span class="gradient-circle"></span>

解决方法

这是一个没有 mask-composite 的不同想法，我猜这是罪魁祸首。只需考虑一个额外的层，即可独立应用两个蒙版

.gradient-circle {
  height: 10rem;
  width: 10rem;
  --b: 5px; /* border width*/
  display: inline-block;
  margin: 10px;
  z-index: 0;
  position: relative;
}

.gradient-circle div,.gradient-circle div:before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.gradient-circle div {
  -webkit-mask: linear-gradient(0deg,#fff,transparent 96%);
}

.gradient-circle div:before {
  content: "";
  background: var(--c,linear-gradient(to top,#5454d4,rgba(249,116,104)));
  -webkit-mask: radial-gradient(farthest-side,transparent calc(100% - var(--b) - 1px),#fff calc(100% - var(--b))) content-box;
  border-radius: 50%;
  padding: 1px;
}

<span class="gradient-circle">
  <div></div>
</span>