带有渐变和半径的边框 Safari 支持

Question

我跟着这个例子：https://dev.to/afif/border-with-gradient-and-radius-387f

它在 Chrome 和 Firefox 中完美运行：

.box {
  position:relative;
}
.box::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-radius:50px; 
  padding:10px; 
  background:linear-gradient(45deg,red,blue); 
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out; 
  mask-composite: exclude; 
}

<div class="box"></div>

但在 Safari 中不起作用。我发誓我开始讨厌苹果了。有什么办法可以让这个在 Safari 上工作吗？谢谢！

Answer 1

我没什么好说的，这对我有用。我推荐工具来添加提供者前缀

  .box::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          border-radius: 50px;
          padding: 10px;
          background: -o-linear-gradient(45deg, red, blue);
          background: linear-gradient(45deg, red, blue);
          -webkit-mask-composite: xor;
                  mask-composite: exclude;
        }