css 边框角叠加

Question

例如，当您对左侧和底部使用不同尺寸时，有一种方法可以解决 css 边框问题吗？像那样:

我知道那是有角度的，但是有一种方法可以在上面使用某种剪裁或蒙版甚至 z 索引？

我的css:

.activity-container{
  border-bottom: 1px solid @color-border-light;
  border-left: 5px solid @color-green;
  position: relative;
}

谢谢

Answer 1

z-index 属性不适用于 border 值，所有 border 边都延伸到它们所应用的元素中。如果你想要一个延伸到元素外部的边框，我建议 outline，但是 outline 不能应用于各个边，所以它必须在元素周围保持一致。

综上所述，您可以使用 box-shadow 作为元素左侧的伪边框，因为它可以以扩展到元素外部或内部的方式应用（外部由默认）：

.bordered {
  box-sizing: border-box;
  height: 100px;
  width: 100px;
  border: 1px solid red;
  border-left: none;
  box-shadow: -5px 0px 0px 0px green;
}

<div class="bordered"></div>

我正在做的是隐藏 border 的左侧并将其替换为延伸到元素左侧之外的 box-shadow。由于border向内延伸，box-shadow向外延伸，因此它们相交而不是重叠。

css 边框角叠加

css border corner overlay

css

border