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

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

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


当前回答

你可以用偏移量来查看大纲,但这需要一些填充来存在于你的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的边缘,以适合你喜欢的。

其他回答

虽然这个问题已经通过使用box-shadow和outline属性的解决方案得到了充分的回答,但我想稍微扩展一下 对于所有那些降落在这里(像我自己)寻找一个解决方案的内边界偏移

假设你有一个100px x 100px的黑色div,你需要用白色边框来嵌入它——它的内偏移量为5px(比如说)——这仍然可以用上面的属性来完成。

不必

这里的技巧是知道允许多个盒子阴影,其中第一个阴影在顶部,随后的阴影具有较低的z顺序。

有了这些知识,盒影的声明将是:

box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white;

div { 宽度:100 px; 身高:100 px; 背景:黑色; 盒影:插入0 0 0 5px黑色,插入0 0 0 10px白色; } < div > < / div >

基本上,这个声明说的是:首先渲染最后一个(10px白色)阴影,然后渲染上面的前5px黑色阴影。

用Outline -offset勾勒轮廓

为达到与上述相同的效果,概要声明如下:

outline: 5px solid white;
outline-offset: -10px;

div { 宽度:100 px; 身高:100 px; 背景:黑色; 轮廓:5px纯白色; outline-offset: -10 px; } < div > < / div >

注意:IE不支持outline-offset,如果这对你很重要的话。

Codepen演示

如果你使用box-sizing: border-box不仅表示边框, 填充、保证金等。所有元素都将进入父元素 元素。

Div p { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; 宽度:150 px; 高度:100%; 边框:20px实体#f00; background - color: # 00 f; 颜色:# fff; 填充:10 px; } < div > 它在20世纪60年代随着Letraset床单的发行而流行起来 < / div >

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

我在上面没有看到的一个解决方案是在输入上填充,我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做一个背景图像,并在上面画一个边界。