-Webkit-mask 剪切边框。一旦被屏蔽，是否有强制将边框强制为 div 的形状？

Question

所以我正在尝试为我的网站创建一个带有倒角的响应式框架。我成功地创建了它的形状，但是一旦我尝试为其添加边框，-webkit-mask 就会将其剪掉。有什么办法可以轻松实现这一点吗？

.box {
  width: 98%;
  height: 800px;
  -webkit-mask: radial-gradient(40px at 40px 40px,#0000 98%,#000) -40px -40px;
  background-color: black;
  margin: auto;
  border-width: 10px;
  border-style: solid;
  border-color: red;
}

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

谢谢你

创建一个带有倒角和透明背景的边框。

Answer 1

使用与蒙版类似的重复径向渐变创建一个在角落里带有红色圆圈的背景。

请注意，我对背景的位置和大小使用了与蒙版相同的参数，但背景相对于蒙版是内嵌的。看起来遮罩位置与边框框相关，而背景位置与内容框相关。结果并不完美，但可能已经足够好了。

如果mask和gradient的位置都与边框相关就更好了；那么渐变的中心将重合，您可以使用稍大的半径作为背景。

.box {
  width: 80%;
  height: 200px;
  mask: radial-gradient(40px at 40px 40px,#0000 98%,red) -40px -40px;
  background-color: black;
  margin: auto;
  border-width: 10px;
  border-style: solid;
  border-color: red;
  background: radial-gradient(40px at 40px 40px,red 98%,#000) -40px -40px;
}

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