CSS 是否可以在 x 像素后开始边框底部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14196214/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to start the border-bottom after x amount of pixels?
提问by user1534664
It would be cool if there was such an option, else I'd have to overlap the border-bottomwith another div..
如果有这样的选项会很酷，否则我必须将其border-bottom与另一个 div重叠。
回答by Ana
EDIT: What I'd do these days if there's a bit more in terms of the element's text content is use box-shadowand background-clip. Otherwise, see the last solution in my original answer.
编辑：如果在元素的文本内容方面有更多内容，我现在会做的是 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>Let's dissect the above.
我们来剖析一下上面的内容。
First off, border-bottom: solid .75em transparent.
首先，border-bottom: solid .75em transparent。
The border-bottomarea is going to be the gap area. That's why we make it transparent. Changing the width of this border changes the width of the gap.
该border-bottom区域将成为间隙区域。这就是我们使它透明的原因。更改此边框的宽度会更改间隙的宽度。
The margin, widthand heightrules - nothing strange here, just positioning and sizing the element.
的margin，width而height规则-任何异常，只是位置和尺寸的元素。
Then we have this bit: box-shadow: 0 1px 0 -1px black.
然后我们有这个位：box-shadow: 0 1px 0 -1px black.
This box-shadowwith no blur creates the bottom border. The yoffset (second value) creates a 1px"border". Increasing this yoffset increases the width of our "border". This is a blackborder, but we could change that to anything else.
这box-shadow没有模糊创建底部边框。该y偏移（第二个值）创建一个1px“边界”。增加这个y偏移量会增加我们“边界”的宽度。这是一个black边界，但我们可以将其更改为其他任何内容。
We also don't want our box-shadow to show up on the sides, so we give it a -1pxspread.
我们也不希望我们的盒子阴影出现在侧面，所以我们给它一个-1px蔓延。
Finally, we set a backgroundon our element. It's a dimgreyone, but it could be anything else (a gradient, a picture, whatever). By default backgrounds extend under the border as well, but we don't want that, so we limit it to the area of the padding-box. I've used the shorthand here. The longhand property is background-clipand you can find a detailed explanation for how it works and other examples similar to this one in this article(disclaimer: I wrote it).
最后，我们background在我们的元素上设置了 a 。这是dimgrey一个，但也可以是其他任何东西（渐变、图片等等）。默认情况下，背景也会延伸到边框下方，但我们不希望那样，所以我们将其限制在padding-box. 我在这里使用了简写。该手写属性background-clip，你可以找到它是如何工作和与此类似的在详细解释其他例子这篇文章（免责声明：我写的）。
Here is the original answer
这是原始答案
You could use a pseudo element. Absolutely positioned, 100% width, offset below the bottom of the element.
您可以使用伪元素。绝对定位，100% 宽度，在元素底部下方偏移。
demo
演示
HTML:
HTML:
<div></div>
CSS:
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: '';
}
Or you could use background-clip: content-boxand you won't need to use a pseudo-element. But then your text will stick to the edges of the background (unless it's a small text and centred).
或者您可以使用background-clip: content-box并且不需要使用伪元素。但是随后您的文本将粘在背景的边缘（除非它是一个小文本并居中）。
demo
演示
Relevant CSS:
相关CSS：
div {
margin: 7em auto 1em;
padding: 0 0 .8em;
border-bottom: solid 1px;
width: 10em; height: 5em;
background: dimgrey content-box;
}
回答by midudev
You can use the padding.
您可以使用填充。
padding: 10px; // push 10px the content
border: 1px solid #fff;
回答by Mark Design
Margin and padding are white space around an image or an object.
边距和填充是图像或对象周围的空白区域。
As you can see in the image, padding is the space between the content and the border that you define, instead margin is the space outside the border, between the border and the other elements next to this object.
正如您在图像中看到的，内边距是内容和您定义的边框之间的空间，而边距是边框外、边框与此对象旁边的其他元素之间的空间。
So in your case you can do something like this:
因此，在您的情况下，您可以执行以下操作：
HTML:
HTML：
<div id="box"></div>
CSS:
CSS：
#box{
background: url(image.jpg) no-repeat;
height: 100px;
width: 100px;
border-bottom: 1px solid #333;
padding-bottom: 10px;
}
Here you can find a simple example: http://jsfiddle.net/k7QcN/
在这里你可以找到一个简单的例子：http: //jsfiddle.net/k7QcN/
