将边界放置在div内部，而不是在其边缘上

使用伪元素:

.button { 背景:# 333; 颜色:# fff; 浮:左; 填充:20 px; 保证金:20 px; 位置:相对; ｝ {后.button:: 内容:”; 位置:绝对的; 上图:0; 右:0; 底部:0; 左:0; 边框:5px solid #f00; ｝ < div class =”按钮“> < / div >你好

在样式化选定元素的虚拟最后一个子元素之后使用::。内容属性创建匿名替换元素。

我们使用相对于父元素的绝对位置来包含伪元素。然后你可以自由地在你的主元素的背景中设置任何自定义背景和/或边框。

这种方法不会影响主元素内容的位置，这与使用box-sizing: border-box;不同。

想想这个例子:

.parent { 宽度:200 px; ｝ .button { 背景:# 333; 颜色:# fff; 填充:20 px; 边框:5px solid #f00; border-left-width: 20 px; box-sizing: border-box; ｝ < div class =“父”> < div class =”按钮“> < / div >你好 < / div >

这里.button的宽度使用父元素约束。设置左边框宽度可以调整内容框大小，从而调整文本的位置。

.parent { 宽度:200 px; ｝ .button { 背景:# 333; 颜色:# fff; 填充:20 px; 位置:相对; ｝ {后.button:: 内容:”; 位置:绝对的; 上图:0; 右:0; 底部:0; 左:0; 边框:5px solid #f00; border-left-width: 20 px; ｝ < div class =“父”> < div class =”按钮“> < / div >你好 < / div >

使用伪元素方法不会影响内容框的大小。

根据应用程序的不同，使用伪元素的方法可能是也可能不是理想的行为。

2015-07-29 08:49:05

为了在新旧浏览器之间保持一致的呈现，可以添加一个双容器，外部的容器具有宽度，内部的容器具有边框。

<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>

这显然只在精确宽度比额外标记更重要的情况下才会发生!

2012-03-07 12:22:03

雅虎这真的是可能的。我找到了。

对于底部边界:

div {box-shadow: 0px -3px 0px red inset; }

Top Border:

div {box-shadow: 0px 3px 0px red inset; }

2015-03-18 23:45:38

你也可以像这样使用盒子阴影:

div{
    -webkit-box-shadow:inset 0px 0px 0px 10px #f00;
    -moz-box-shadow:inset 0px 0px 0px 10px #f00;
    box-shadow:inset 0px 0px 0px 10px #f00;
}

示例:http://jsfiddle.net/nVyXS/(悬停查看边框)

这只适用于现代浏览器。例如:不支持IE 8。查看caniuse.com(框影功能)了解更多信息。

2012-11-22 17:45:50

如果你使用box-sizing: border-box不仅表示边框，填充、保证金等。所有元素都将进入父元素元素。

Div p { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; 宽度:150 px; 高度:100%; 边框:20px实体#f00; background - color: # 00 f; 颜色:# fff; 填充:10 px; ｝ < div > 它在20世纪60年代随着Letraset床单的发行而流行起来 < / div >

2016-10-26 19:53:25