我有一个<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(包括边界)?
当前回答
一个更现代的解决方案可能是使用css变量和calc. calc被广泛支持,但在IE11中还没有变量(可使用polyfills)。
:root {
box-width: 100px;
border-width: 1px;
}
#box {
width: calc(var(--box-width) - var(--border-width));
}
虽然这确实需要一些计算,这是最初的问题想要避免的。我认为这是一个使用计算的好时机,因为它们是由css本身控制的。它也不需要额外的标记或占用以后可能需要的其他css属性。
这个解决方案只有在不需要固定高度的情况下才真正有用。
其他回答
设置box-sizing属性为border-box:
div { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; 宽度:100 px; 身高:100 px; 边框:20px实体#f00; 背景:# 00 f; 保证金:10 px; } Div + Div { 边框:10px纯红色; } < div >你好!< / div > < div >你好!< / div >
它适用于IE8及以上版本。
我在上面没有看到的一个解决方案是在输入上填充,我99%的时间都是这样做的。你可以按照……
input {
padding: 8px;
}
input.invalid {
border: 2px solid red;
padding: 6px; // 8px - border or "calc(8px - 2px)"
}
我喜欢的是,我有一个完整的菜单,每边的边框+填充+过渡属性。
最好的跨浏览器解决方案(主要是IE支持)像@Steve说的是做一个div 98px的宽度和高度,而不是在它周围添加1px的边界,或者你可以为div 100x100px做一个背景图像,并在上面画一个边界。
11年后,答案在这里:
只用提纲: 外形:0.2vw纯红色;
我希望我能帮助那些11年后也看到这个问题的人。
你可以使用属性outline和outline-offset带负值,而不是使用常规边框,适合我:
div { 身高:100 px; 宽度:100 px; 背景颜色:灰色; margin-bottom: 10 px; } {div#边界 边框:2px纯红色; } div #{轮廓 轮廓:2px实心红色; outline-offset: 2 px; } 使用常规边界。 < div id = "边境" > < / div > 使用outline和outline-offset。 < div id = "大纲" > < / div >