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

Placing border inside of div and not on its edge

提问by TheMonkeyMan

I have a <div>element and I want to put a border on it. I know I can write style="border: 1px solid black", but this adds 2px to either side of the div, which is not what I want.

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

I would rather have this border be -1px from the edge of the div. The div itself is 100px x 100px, and if I add a border, then I have to do some mathematics to make the border appear.

我宁愿让这个边框离 div 的边缘是 -1px。div 本身是 100px x 100px，如果我加了一个边框，那么我必须做一些数学运算才能让边框出现。

Is there any way that I can make the border appear, and ensure the box will still be 100px (including the border)?

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

回答by sandeep

Set box-sizingproperty to border-box:

将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>

It works on IE8 & above.

它适用于IE8 及以上。

回答by caitriona

You can also use box-shadow like this:

你也可以像这样使用 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;
}

Example here: http://jsfiddle.net/nVyXS/(hover to view border)

此处示例：http: //jsfiddle.net/nVyXS/（悬停以查看边框）

This works in modern browsers only. For example: No IE 8 support. See caniuse.com (box-shadow feature)for more info.

这仅适用于现代浏览器。例如：不支持 IE 8。 有关更多信息，请参阅 caniuse.com（框阴影功能）。

回答by Shukhrat Raimov

Probably it is belated answer, but I want to share with my findings. I found 2 new approaches to this problem that I have not found here in the answers:

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

Inner border through box-shadowcss property

通过box-shadowcss属性的内边框

Yes, box-shadow is used to add box-shadows to the elements. But you can specify insetshadow, that would look like a inner border rather like a shadow. You just need to set horizontal and vertical shadows to 0px, and the "spread" property of the box-shadowto the width of the border you want to have. So for the 'inner' border of 10px you would write the following:

是的， box-shadow 是用来给元素添加 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;
}

Here is jsFiddleexample that illustrates the difference between box-shadowborder and 'normal' border. This way your border and the box width are of total 100px including the border.

这是jsFiddle示例，它说明了box-shadow边框和“正常”边框之间的区别。这样你的边框和框的宽度总共是 100 像素，包括边框。

More about box-shadow:here

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

Border through outline css property

通过轮廓css属性边框

Here is another approach, but this way the border would be outside of the box. Here is an example. As follows from the example, you can use css outlineproperty, to set the border that does not affect the width and height of the element. This way, the border width is not added to the width of an element.

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

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

More about outline: here

更多关于大纲：这里

回答by xBoss naYan

Yahoo! This is really possible. I found it.

雅虎！这真的是可能的。我找到了。

For Bottom Border:

对于底部边框：

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

For Top Border:

对于顶部边框：

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

回答by Gajus

Use pseudo element:

使用伪元素：

.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>

Using ::afteryou are styling the virtual last child of the selected element. contentproperty creates an anonymous replaced element.

使用::after您正在为所选元素的虚拟最后一个子元素设置样式。content属性创建一个匿名替换元素。

We are containing the pseudo element using absolute position relative to the parent. Then you have freedom to have whatever custom background and/or border in the background of your main element.

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

This approach does not affect placement of the contents of the main element, which is different from using box-sizing: border-box;.

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

Consider this example:

考虑这个例子：

.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>

Here .buttonwidth is constrained using the parent element. Setting the border-left-widthadjusts the content-box size and thus the position of the text.

这里的.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>

Using the pseudo-element approach does not affect the content-box size.

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

Depending on the application, approach using a pseudo-element might or might not be a desirable behaviour.

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

回答by Danield

Although this question has already been adequately answered with solutions using the box-shadowand outlineproperties, I would like to slightly expand on this for all those who have landed here (like myself) searching for a solution for an inner border with an offset

尽管使用box-shadow和outline属性的解决方案已经充分回答了这个问题，但我想为所有登陆这里的人（像我自己）稍微扩展一下这个问题，以寻找具有偏移量的内部边界的解决方案

So let's say you have a black 100px x 100px divand you need to inset it with a white border - which has an inner offsetof 5px (say) - this can still be done with the above properties.

因此，假设您有一个黑色的 100px x 100pxdiv并且您需要将其插入一个白色边框 - 其内部偏移量为 5px（例如） - 这仍然可以使用上述属性来完成。

box-shadow

盒子阴影

The trick here is to know that multiple box-shadows are allowed, where the first shadow is on top and subsequent shadows have lower z-ordering.

这里的技巧是要知道允许多个框阴影，其中第一个阴影在顶部，随后的阴影具有较低的 z 排序。

With that knowledge, the box-shadow declaration will be:

有了这些知识， 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>

Basically, what that declaration is saying is: render the last (10px white) shadow first, then render the previous 5px black shadow above it.

基本上，该声明的意思是：首先渲染最后一个（10px 白色）阴影，然后在其上方渲染前一个 5px 黑色阴影。

outlinewith outline-offset

外形与轮廓偏移

For the same effect as above the outline declarations would be:

对于与上述相同的效果，大纲声明将是：

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

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

<div></div>

NB:outline-offsetisn't supported by IEif that's important to you.

注意：如果这对您很重要，则outline-offsetIE 不支持。

---

---

Codepen demo

代码笔演示

回答by Wilson Delgado

You can use the properties outlineand outline-offsetwith a negative value instead of using a regular border, works for me:

您可以使用属性outline和outline-offset负值而不是使用常规border，对我有用：

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;
}

Using a regular border.
<div id="border"></div>

Using outline and outline-offset.
<div id="outline"></div>

回答by Daniel

I know this is somewhat older, but since the keywords "border inside" landed me directly here, I would like to share some findings that may be worth mentioning here. When I was adding a border on the hover state, i got the effects that OP is talking about. The border ads pixels to the dimension of the box which made it jumpy. There is two more ways one can deal with this that also work for IE7.

我知道这有点旧，但是由于关键字“内部边界”使我直接来到这里，我想在这里分享一些可能值得一提的发现。当我在悬停状态添加边框时，我得到了 OP 所说的效果。边框将像素广告到框的尺寸，使其变得跳跃。还有两种方法可以解决这个问题，它们也适用于 IE7。

1) Have a border already attached to the element and simply change the color. This way the mathematics are already included.

1）有一个已经附加到元素的边框，只需更改颜色。这样数学就已经包括在内了。

div {
   width:100px;
   height:100px;
   background-color: #aaa;
   border: 2px solid #aaa; /* notice the solid */
}

div:hover {
   border: 2px dashed #666;
}

2 ) Compensate your border with a negative margin. This will still add the extra pixels, but the positioning of the element will not be jumpy on

2）用负边距补偿你的边界。这仍然会添加额外的像素，但元素的定位不会在

div {
   width:100px;
   height:100px;
   background-color: #aaa;
}

div:hover {
  margin: -2px;
  border: 2px dashed #333;
}

回答by Evert

for consistent rendering between new and older browsers, add a double container, the outer with the width, the inner with the border.

为了在新旧浏览器之间保持一致的渲染，添加一个双容器，外层为宽度，内层为边框。

<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>

this is obviously only if your precise width is more important than having extra markup!

这显然只有在您的精确宽度比额外标记更重要的情况下才会发生！

回答by Ayyappan K

If you use box-sizing: border-box means not only border, padding,margin, etc. All element will come inside of the parent element.

如果您使用 box-sizing：border-box 不仅意味着边框、填充、边距等。所有元素都将位于父元素内部。

div p {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 150px;
    height:100%;
    border: 20px solid #f00;
    background-color: #00f;
    color:#fff;
    padding: 10px;
  
}

<div>
  <p>It was popularised in the 1960s with the release of Letraset sheets</p>
</div>