css - 是否可以在 x 个像素后开始边框底部？

Question

如果有这样的选项会很酷，否则我必须将 border-bottom 与另一个 div 重叠..

Answer 1

编辑:如果在元素的文本内容方面有更多内容，我现在会做的是使用 box-shadow 和 background-clip 。否则，请参阅我原始答案中的最后一个解决方案。

div {
  border-bottom: solid .75em transparent;
  margin: 7em auto 1em;
  width: 10em; height: 5em;
  box-shadow: 0 1px 0 -1px black;
  background: dimgrey padding-box;
}

<div></div>

让我们剖析上面的内容。

首先，border-bottom: solid .75em transparent。

border-bottom 区域将成为间隙区域。这就是我们让它透明的原因。更改此边框的宽度会更改间隙的宽度。

margin、width 和 height 规则 - 这里没有什么奇怪的，只是元素的定位和大小调整。

然后我们有这个位:box-shadow: 0 1px 0 -1px black。

这个没有模糊的 box-shadow 创建了底部边框。 y 偏移量(第二个值)创建一个 1px“边框”。增加此 y 偏移会增加我们“边框”的宽度。这是一个 black 边框，但我们可以将其更改为任何其他边框。

我们也不希望我们的盒子阴影出现在两侧，所以我们给它一个 -1px spread。

最后，我们在我们的元素上设置了一个背景。它是一个 dimgrey，但它可以是任何其他东西(渐变、图片等)。默认情况下，背景也会延伸到边框下方，但我们不希望这样，因此我们将其限制在 padding-box 的区域。我在这里使用了简写。普通属性是 background-clip，您可以在 this article 中找到有关其工作原理的详细说明以及与此类似的其他示例。 (免责声明:我写的)。

---

这是原始答案

您可以使用伪元素。绝对定位，100% 宽度，在元素底部下方偏移。

demo

HTML:

<div></div>

CSS:

div {
    position: relative;
    margin: 7em auto 1em;
    width: 10em; height: 5em;
    background: dimgrey;
}
div:after {
    position: absolute;
    bottom: -.8em;
    width: 100%;
    border-bottom: solid 1px;
    content: '';
}

---

或者您可以使用 background-clip: content-box 并且您不需要使用伪元素。但随后您的文本将粘在背景的边缘(除非它是小文本且居中)。

demo

相关CSS:

div {
    margin: 7em auto 1em;
    padding: 0 0 .8em;
    border-bottom: solid 1px;
    width: 10em; height: 5em;
    background: dimgrey content-box;
}