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

Question

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

Answer 1

编辑：如果在元素的文本内容方面有更多内容，我现在会做的是 usebox-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，只是定位和调整元素的大小。widthheight

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

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

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

最后，我们background在元素上设置 a。它是dimgrey一个，但它可以是其他任何东西（渐变、图片等）。默认情况下，背景也延伸到边框下方，但我们不希望这样，所以我们将其限制在padding-box. 我在这里使用了速记。您background-clip可以在本文中找到关于它如何工作的详细说明以及与此类似的其他示例（免责声明：我写了它）。

---

这是原始答案

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

演示

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并且不需要使用伪元素。但是你的文本会粘在背景的边缘（除非它是一个小文本并且居中）。

演示

相关CSS：

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

Answer 2

边距和填充是图像或对象周围的空白。

正如您在图像中看到的，内边距是您定义的内容和边框之间的空间，而边距是边框外的空间，即边框和该对象旁边的其他元素之间的空间。

因此，在您的情况下，您可以执行以下操作：

HTML：

<div id="box"></div>

CSS：

#box{
    background: url(image.jpg) no-repeat;
    height: 100px;
    width: 100px;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
}

在这里你可以找到一个简单的例子：http: //jsfiddle.net/k7QcN/

Answer 3

您可以使用填充。

padding: 10px; // push 10px the content
border: 1px solid #fff;