我有一个<div>元素,我想给它加一个边框。我知道我可以写style="border: 1px solid black",但这将在div的两侧增加2px,这不是我想要的。
我更希望这个边界距离div的边缘为-1px。div本身是100px x 100px,如果我添加一个边界,那么我必须做一些数学运算来使边界出现。
有什么方法我可以使边界出现,并确保盒子将仍然是100px(包括边界)?
我有一个<div>元素,我想给它加一个边框。我知道我可以写style="border: 1px solid black",但这将在div的两侧增加2px,这不是我想要的。
我更希望这个边界距离div的边缘为-1px。div本身是100px x 100px,如果我添加一个边界,那么我必须做一些数学运算来使边界出现。
有什么方法我可以使边界出现,并确保盒子将仍然是100px(包括边界)?
当前回答
11年后,答案在这里:
只用提纲: 外形:0.2vw纯红色;
我希望我能帮助那些11年后也看到这个问题的人。
其他回答
为了在新旧浏览器之间保持一致的呈现,可以添加一个双容器,外部的容器具有宽度,内部的容器具有边框。
<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>
这显然只在精确宽度比额外标记更重要的情况下才会发生!
最好的跨浏览器解决方案(主要是IE支持)像@Steve说的是做一个div 98px的宽度和高度,而不是在它周围添加1px的边界,或者你可以为div 100x100px做一个背景图像,并在上面画一个边界。
你也可以像这样使用盒子阴影:
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(框影功能)了解更多信息。
一个更现代的解决方案可能是使用css变量和calc. calc被广泛支持,但在IE11中还没有变量(可使用polyfills)。
:root {
box-width: 100px;
border-width: 1px;
}
#box {
width: calc(var(--box-width) - var(--border-width));
}
虽然这确实需要一些计算,这是最初的问题想要避免的。我认为这是一个使用计算的好时机,因为它们是由css本身控制的。它也不需要额外的标记或占用以后可能需要的其他css属性。
这个解决方案只有在不需要固定高度的情况下才真正有用。
我知道这有点老了,但由于关键字“内部边界”直接把我带到了这里,我想分享一些值得在这里提到的发现。 当我在悬停状态上添加边界时,我得到了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;
}