css - css边框角覆盖

Question

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

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

我的CSS：

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

谢谢

标签： cssborder

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>

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