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

Question

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

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

有什么方法可以让边框出现,并确保框仍然是100px(包括边框)？

Answer 1

设置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及以上版本.

Answer 2

你也可以像这样使用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(框阴影功能).

Answer 3

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

通过box-shadowcss属性的内部边界

是的,box-shadow用于向元素添加框阴影.但你可以指定inset阴影,它看起来像一个内部边界,而不是阴影.您只需要将水平和垂直阴影设置为0px,并将" spread"属性设置为box-shadow您想要的边框宽度.因此,对于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;
}

更多关于大纲:这里

Answer 4

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

对于底边:

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

对于顶级边框:

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

Answer 5

使用伪元素:

.button {
    background: #333;
    color: #fff;
    float: left;
    padding: 20px;
    margin: 20px;
    position: relative;
}

.button::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 5px solid #f00;
}

<div class='button'>Hello</div>

使用::after您为所选元素的虚拟最后一个子元素设置样式.contentproperty创建一个匿名替换元素.

我们使用相对于父级的绝对位置来包含伪元素.然后你可以自由地在主元素的背景中拥有任何自定义背景和/或边框.

这种方法不会影响主元素内容的放置,这与使用不同box-sizing: border-box;.

考虑这个例子:

.parent {
    width: 200px;
}

.button {
    background: #333;
    color: #fff;
    padding: 20px;
    border: 5px solid #f00;
    border-left-width: 20px;
    box-sizing: border-box;
}

<div class='parent'>
    <div class='button'>Hello</div>
</div>

这里.button使用父元素约束宽度.设置border-left-width调整内容框大小,从而调整文本的位置.

.parent {
    width: 200px;
}

.button {
    background: #333;
    color: #fff;
    padding: 20px;
    position: relative;
}

.button::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 5px solid #f00;
    border-left-width: 20px;
}

<div class='parent'>
    <div class='button'>Hello</div>
</div>

使用伪元素方法不会影响内容框大小.

根据应用程序,使用伪元素的方法可能是也可能不是理想的行为.

Answer 6

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

所以假设你有一个黑色的100px x 100px div你需要用白色边框插入它 - 内部偏移量为5px(比方说) - 这仍然可以用上面的属性来完成.

箱阴影

这里的技巧是知道允许多个盒阴影,其中第一个阴影位于顶部,后续阴影具有较低的z排序.

有了这些知识,box-shadow声明将是:

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

div {
  width: 100px;
  height: 100px;
  background: black;
  box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white; 
}

<div></div>

基本上,该声明所说的是:首先渲染最后一个(10px白色)阴影,然后渲染其上方的前一个5px黑色阴影.

轮廓与偏移轮廓

为了与上述相同的效果,大纲声明将是:

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

div {
  width: 100px;
  height: 100px;
  background: black;
  outline: 5px solid white;
  outline-offset: -10px;
}

<div></div>

注意: outline-offset IE不支持,如果这对您很重要.

Codepen演示

Answer 7

11 年后，答案如下：

只需使用outline：
outline: 0.2vw solid red;

我希望我能帮助11年后也看到这个问题的人。

Answer 8

您可以使用属性大纲和轮廓偏移量为负值,对我来说:

div{
    height: 100px;
    width: 100px;
    background-color: grey;
    margin-bottom: 10px; 
}

div#border{
    border: 2px solid red;
}

div#outline{
    outline: 2px solid red;
    outline-offset: -2px;
}

Answer 9

我知道这有点旧,但由于关键词"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;
}