使用-webkit-mask后边框被裁切，如何实现带倒圆角的响应式边框？

我正在为网站制作带倒圆角的响应式边框框架，已实现框架形状，但添加边框后，-webkit-mask会将边框裁切。能否简便实现带倒圆角且背景透明的边框框架？

原实现代码 #

HTML #

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

CSS #

.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;
}

解决方案 #

问题根源在于mask（包括-webkit-mask）会作用于元素的整个盒模型，包括border区域，所以边框边角会被裁切。可以改用背景渐变模拟边框的方式，避免border被mask影响，同时保持背景透明：

修改后的CSS #

.box {
  width: 98%;
  height: 800px;
  margin: auto;
  /* 用4条线性渐变模拟上下左右边框，留出倒圆角空白 */
  background: 
    linear-gradient(red, red) 0 0 / calc(100% - 80px) 10px no-repeat,
    linear-gradient(red, red) 0 0 / 10px calc(100% - 80px) no-repeat,
    linear-gradient(red, red) 100% 0 / calc(100% - 80px) 10px no-repeat,
    linear-gradient(red, red) 100% 100% / 10px calc(100% - 80px) no-repeat;
  /* 保持mask实现内部倒圆角镂空，同时添加标准mask属性兼容更多浏览器 */
  -webkit-mask: radial-gradient(40px at 40px 40px, #0000 98%, #000) -40px -40px;
  mask: radial-gradient(40px at 40px 40px, #0000 98%, #000) -40px -40px;
}

说明 #

• 用4条线性渐变分别模拟上、左、右、下边框，通过calc(100% - 80px)预留出倒圆角的空白区域（80px是2倍的倒圆角半径40px），保证响应式适配。
• mask仅负责挖除元素内部的四个角，不会影响到渐变模拟的边框，最终实现背景透明的倒圆角边框效果。
• 添加标准mask属性，提升浏览器兼容性。

内容的提问来源于stack exchange，提问作者borj