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

我更希望这个边界距离div的边缘为-1px。div本身是100px x 100px,如果我添加一个边界,那么我必须做一些数学运算来使边界出现。

有什么方法我可以使边界出现,并确保盒子将仍然是100px(包括边界)?


当前回答

最好的跨浏览器解决方案(主要是IE支持)像@Steve说的是做一个div 98px的宽度和高度,而不是在它周围添加1px的边界,或者你可以为div 100x100px做一个背景图像,并在上面画一个边界。

其他回答

你可以用偏移量来查看大纲,但这需要一些填充来存在于你的div上。或者你完全可以在里面放置一个边界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的边缘,以适合你喜欢的。

最好的跨浏览器解决方案(主要是IE支持)像@Steve说的是做一个div 98px的宽度和高度,而不是在它周围添加1px的边界,或者你可以为div 100x100px做一个背景图像,并在上面画一个边界。

我知道这有点老了,但由于关键字“内部边界”直接把我带到了这里,我想分享一些值得在这里提到的发现。 当我在悬停状态上添加边界时,我得到了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;
}

也许这是一个迟来的答案,但我想分享我的发现。我发现了2种解决这个问题的新方法,这是我在答案中没有发现的:

内边框通过box-shadow css属性

是的,box-shadow用于为元素添加box-shadow。但你可以指定嵌入阴影,它看起来像一个内边框,而不是一个阴影。你只需要将水平和垂直阴影设置为0px,并将盒子阴影的“spread”属性设置为你想要的边界宽度。所以对于10px的“内”边框,你可以这样写:

div{
    width:100px;
    height:100px;
    background-color:yellow;
    box-shadow:0px 0px 0px 10px black inset;
    margin-bottom:20px;
}

下面是一个jsFiddle示例,演示了盒影边框和“正常”边框之间的区别。这样你的边框和盒子宽度总共是100px,包括边框。

更多关于box-shadow的内容:这里

通过outline css属性设置边框

这是另一种方法,但这种方法的边界将在框外。这里有一个例子。 如下例所示,您可以使用css outline属性,来设置不影响元素宽度和高度的边框。这样,边框宽度就不会被添加到元素的宽度中。

div{
   width:100px;
   height:100px;
   background-color:yellow;
   outline:10px solid black;
}

更多关于大纲的内容:这里

你也可以像这样使用盒子阴影:

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(框影功能)了解更多信息。