是否可以在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差.

最后,我们设置了一个background元素.它是dimgrey一个,但它可能是其他任何东西(渐变,图片,等等).默认情况下,背景也会在边框下方延伸,但我们不希望这样,因此我们将其限制为区域padding-box.我在这里使用了速记.longhand属性是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;
}