css遮罩写反圆弧样式

#mask-input {
  position: fixed;
  z-index: 2015;
  outline: 5px solid rgba(46, 46, 56, 0.5);
  .mask-left-bottom {
    position: absolute;
    width: 10px;
    height: 10px;
    right: 0px;
    top: 0px;
    background: radial-gradient(18px at bottom left, transparent 55%, rgba(46, 46, 56, 0.5) 55%);
  }
  .mask-right-bottom {
    position: absolute;
    width: 10px;
    height: 10px;
    left: 0px;
    top: 0px;
    background: radial-gradient(18px at bottom right, transparent 55%, rgba(46, 46, 56, 0.5) 55%);
  }
  .mask-right-top {
    position: absolute;
    width: 10px;
    height: 10px;
    left: 0px;
    bottom: 0px;
    background: radial-gradient(18px at top right, transparent 55%, rgba(46, 46, 56, 0.5) 55%);
  }
  .mask-left-top {
    position: absolute;
    width: 10px;
    height: 10px;
    right: 0px;
    bottom: 0px;
    background: radial-gradient(18px at top left, transparent 55%, rgba(46, 46, 56, 0.5) 55%);
  }
}

其实用个div块做背景透明，设border-radius，然后把outline放很大也能做到。。这样的写法是界面能用多个遮罩互不影响，其他空白部分用div拼就行