在div内而不是在其边缘放置边框

我有一个<div>元素,我想在上面加一个边框。我知道我可以写style="border: 1px solid black",但是这会在div的任何一侧增加2px,这不是我想要的。

我宁愿此边框距div的边缘为-1px。div本身是100px x 100px,如果我添加边框,则必须做一些数学运算才能使边框出现。

有什么方法可以使边框出现,并确保框仍为100px(包括边框)?


胡说叔叔
浏览 1028回答 3
3回答

繁星淼淼

将box-sizing属性设置为border-box:div {&nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; -moz-box-sizing: border-box;&nbsp; &nbsp; -webkit-box-sizing: border-box;&nbsp; &nbsp; width: 100px;&nbsp; &nbsp; height: 100px;&nbsp; &nbsp; border: 20px solid #f00;&nbsp; &nbsp; background: #00f;&nbsp; &nbsp; margin: 10px;}div + div {&nbsp; &nbsp; border: 10px solid red;}<div>Hello!</div><div>Hello!</div>它适用于IE8及更高版本。
打开App,查看更多内容
随时随地看视频慕课网APP