我有一个<div>
元素,我想给它加一个边框。 我知道我可以写style="border:1px solid black"
,但这在div的两边增加了2px,这不是我想要的。
我宁可让这个边框在离DIV边缘-1px的地方。div本身是100px x 100px,如果我添加一个边框,那么我必须做一些数学运算来使边框出现。
有没有什么方法可以让边框出现,并确保方框仍然是100px(包括边框)?
设置 "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 &以上上有效。
你也可以像这样使用盒状阴影。
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;
}
这里的例子:
(悬停查看边框)这只在现代浏览器中起作用。比如说。不支持IE 8。 见caniuse.com (box-shadow feature) 了解更多信息。