Css倒置边界2.0

Question

人们想出了倒置的边框（这里是一个例子）：https://css-tricks.com/examples/RoundOutTabs/

但它总是一个黑客。这是我的问题：

我将在具有动态透明度并且下面有图片的背景上覆盖倒角的方框。

在这种情况下，我无法解决这个问题。

不可能＆＃34;切断＆＃34;标签的额外部分？以更普遍适用的方式达到同样的效果？

Answer 1

我会考虑线性/径向渐变来创建没有所有这些伪元素的整个元素：

var query = from obj1 in ListA
            join obj2 in ListB on obj1.Id equals obj2.Id
            select obj1.Summary = obj2.Value, return obj1;

.active {
  padding:20px 0;
  width:100px;
  text-align:center;
  display:inline-block;
  background:
  radial-gradient(circle at bottom right,orange 50%,transparent 53%) 4px 0/16px 10px no-repeat,
  radial-gradient(circle at bottom left,orange 50%,transparent 53%) calc(100% - 4px) 0%/16px 10px no-repeat,
  radial-gradient(circle at top left,transparent 50%,orange 55%) 0% 100%/16px 10px no-repeat,
  radial-gradient(circle at top right,transparent 50%,orange 55%) 100% 100%/16px 10px no-repeat,
  linear-gradient(orange,orange) 20px 0px/calc(100% - 40px) 20px no-repeat,
  linear-gradient(orange,orange) 10px 10px/calc(100% - 20px) 100% no-repeat;
}

<强>更新

以下是不使用速记版本的相同代码：

<span class="active">
 link
</span>

.active {
  padding:20px 0;
  width:100px;
  text-align:center;
  display:inline-block;
  background-image:
  radial-gradient(circle at bottom right,orange 50%,transparent 53%),
  radial-gradient(circle at bottom left,orange 50%,transparent 53%),
  radial-gradient(circle at top left,transparent 50%,orange 55%),
  radial-gradient(circle at top right,transparent 50%,orange 55%),
  linear-gradient(orange,orange),
  linear-gradient(orange,orange);
  background-position:4px 0,calc(100% - 4px) 0%,0% 100%,100% 100%,20px 0,10px 10px;
  background-size:16px 10px,16px 10px,16px 10px,16px 10px,calc(100% - 40px) 20px,calc(100% - 20px) 100%;
  background-repeat:no-repeat;
}