Answers:
将box-sizing
属性设置为border-box
:
div {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 100px;
height: 100px;
border: 20px solid #f00;
background: #00f;
margin: 10px;
}
div + div {
border: 10px solid red;
}
<div>Hello!</div>
<div>Hello!</div>
它适用于IE8及更高版本。
outline
。
box-sizing
caniuse.com/#search=box-sizing
您也可以像这样使用box-shadow:
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(盒子阴影功能)。
可能这是迟来的答案,但我想与我的发现分享一下。我在答案中找到了2种新方法来解决此问题:
box-shadow
CSS属性的内部边界是的,box-shadow用于向元素添加box-shadow。但是您可以指定inset
阴影,看起来像是内部边框,而不是阴影。您只需要将水平阴影和垂直阴影设置为0px
,并将的“ spread
”属性设置为box-shadow
要具有的边框的宽度。因此,对于10px的“内部”边框,您将编写以下内容:
div{
width:100px;
height:100px;
background-color:yellow;
box-shadow:0px 0px 0px 10px black inset;
margin-bottom:20px;
}
这是jsFiddle示例,说明了box-shadow
border和“ normal” border 之间的区别。这样,边框和框的总宽度(包括边框)为100px。
有关盒影的更多信息:此处
这是另一种方法,但是这样边界将位于框的外部。这是一个例子。如下例所示,您可以使用css outline
属性来设置不影响元素的宽度和高度的边框。这样,边框宽度不会添加到元素的宽度。
div{
width:100px;
height:100px;
background-color:yellow;
outline:10px solid black;
}
有关大纲的更多信息:这里
使用伪元素:
.button {
background: #333;
color: #fff;
float: left;
padding: 20px;
margin: 20px;
position: relative;
}
.button::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 5px solid #f00;
}
<div class='button'>Hello</div>
通过使用::after
这些样式,可以对所选元素的虚拟最后一个子元素进行样式设置。content
属性创建一个匿名替换元素。
我们使用相对于父元素的绝对位置包含伪元素。然后,您可以自由地在主元素的背景中具有任何自定义背景和/或边框。
这种方法不会影响主要元素内容的放置,这与使用 box-sizing: border-box;
。
考虑以下示例:
.parent {
width: 200px;
}
.button {
background: #333;
color: #fff;
padding: 20px;
border: 5px solid #f00;
border-left-width: 20px;
box-sizing: border-box;
}
<div class='parent'>
<div class='button'>Hello</div>
</div>
在此,.button
宽度是使用父元素限制的。设置border-left-width
调整内容框的大小,从而调整文本的位置。
.parent {
width: 200px;
}
.button {
background: #333;
color: #fff;
padding: 20px;
position: relative;
}
.button::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 5px solid #f00;
border-left-width: 20px;
}
<div class='parent'>
<div class='button'>Hello</div>
</div>
使用伪元素方法不会影响内容框的大小。
根据应用程序的不同,使用伪元素的方法可能是也可能不是理想的行为。
:Before
。
尽管使用box-shadow
和outline
属性的解决方案已经充分回答了这个问题,但我还是想为所有落在这里的人(如我自己)在此问题上稍作扩展,以寻找具有偏移
假设您有一个100px x 100px的黑色,div
并且需要用白色边框插入-具有内部偏移量(为5px)(例如),这仍然可以通过上述属性来完成。
这里的技巧是知道允许多个框阴影,其中第一个阴影在顶部,随后的阴影具有较低的z顺序。
有了这些知识,框阴影声明将为:
box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white;
基本上,该声明的意思是:首先渲染最后一个(10px白色)阴影,然后再渲染上面的前5px黑色阴影。
与上述效果相同,大纲声明为:
outline: 5px solid white;
outline-offset: -10px;
注意: 如果这对您很重要,则outline-offset
IE不支持。
您可以使用这些属性,outline
并outline-offset
使用负值而不是使用regular border
来为我工作:
div{
height: 100px;
width: 100px;
background-color: grey;
margin-bottom: 10px;
}
div#border{
border: 2px solid red;
}
div#outline{
outline: 2px solid red;
outline-offset: -2px;
}
Using a regular border.
<div id="border"></div>
Using outline and outline-offset.
<div id="outline"></div>
我知道这有点老了,但是由于关键字“ border inside”直接把我带到了这里,所以我想分享一些可能值得在这里提及的发现。当我在悬停状态上添加边框时,我得到了OP在谈论的效果。边框将像素广告到框的尺寸,使框变得跳跃。还有两种方法可以解决此问题,这些方法也适用于IE7。
1)在元素上已附加边框,只需更改颜色即可。这样,数学已经包括在内。
div {
width:100px;
height:100px;
background-color: #aaa;
border: 2px solid #aaa; /* notice the solid */
}
div:hover {
border: 2px dashed #666;
}
2)以负边距补偿边界。这仍然会添加额外的像素,但是元素的位置不会跳动
div {
width:100px;
height:100px;
background-color: #aaa;
}
div:hover {
margin: -2px;
border: 2px dashed #333;
}
如果使用box-sizing:border-box不仅意味着border,padding,margin等。所有元素都将位于父元素的内部。
div p {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 150px;
height:100%;
border: 20px solid #f00;
background-color: #00f;
color:#fff;
padding: 10px;
}
<div>
<p>It was popularised in the 1960s with the release of Letraset sheets</p>
</div>
您可以查看带有偏移的轮廓,但这需要在div上存在一些填充。或者,您也可以绝对将border div放置在内部,例如
<div id='parentDiv' style='position:relative'>
<div id='parentDivsContent'></div>
<div id='fakeBordersDiv'
style='position: absolute;width: 100%;
height: 100%;
z-index: 2;
border: 2px solid;
border-radius: 2px;'/>
</div>
您可能需要在假边框div上摆弄空白以适应您的需要。
一个更现代的解决方案可能是使用css variables
和calc
。calc
受到广泛支持,但variables
IE11中尚未提供(可使用polyfills)。
:root {
box-width: 100px;
border-width: 1px;
}
#box {
width: calc(var(--box-width) - var(--border-width));
}
尽管这确实使用了一些计算方法,但最初的问题却想避免这种计算方法。我认为这是使用计算的合适时机,因为它们由CSS本身控制。它也不需要额外的标记或挪用以后可能需要的其他CSS属性。
仅当不需要固定高度时,此解决方案才真正有用。