将边框放在div内部而不是边缘

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

我宁愿让这个边界距离div的边缘是-1px。 div本身是100px x 100px，如果我添加一个边框，那么我必须做一些数学来使边框出现。

有什么方法可以让边框出现，并确保框仍然是100px（包括边框）？

---

#1楼

你也可以像这样使用box-shadow：

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（框阴影功能） 。

---

#2楼

我知道这有点旧，但由于关键词“border inside”让我直接来到这里，我想分享一些可能值得一提的发现。 当我在悬停状态下添加边框时，我得到了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;
}

---

#3楼

最好的跨浏览器解决方案（主要用于IE支持）如@Steve所说的是在宽度和高度上设置一个div为98px而不是在它周围添加1px的边框，或者你可以为div 100x100 px制作背景图像并在其上绘制边框。

---

#4楼

可能是迟来的回答，但我想与我的发现分享。 我找到了两个新方法来解决这个问题，我在答案中没有找到：

内部边框通过box-shadow css属性

是的，box-shadow用于向元素添加框阴影。 但是你可以指定inset阴影，它看起来像一个内边框而不是阴影。 您只需要将水平和垂直阴影设置为0px ，并将box-shadow的“ spread ”属性设置为您想要的边框宽度。 因此，对于10px的“内部”边界，您将编写以下内容：

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

这是jsFiddle示例，说明了box-shadow边框和“普通”边框之间的区别。 这样你的边框和盒子宽度总共100px，包括边框。

关于box-shadow的更多信息： 这里

通过大纲css属性边界

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

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

更多关于大纲： 这里

---

#5楼

雅虎 这确实是可能的。 我找到了。

对于底边：

div {box-shadow: 0px -3px 0px red inset; }

对于顶级边框：

div {box-shadow: 0px 3px 0px red inset; }

来源：oschina

链接：https://my.oschina.net/u/3797416/blog/3161494