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


506

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

我宁愿此边框距div的边缘为-1px。div本身是100px x 100px,如果我添加边框,则必须做一些数学运算才能使边框出现。

有什么方法可以使边框出现,并确保框仍为100px(包括边框)?


对于它的价值,我为那些来这里寻找偏移的内边界的人发布了解决方案
Danield

Answers:


661

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及更高版本



128
唯一的缺陷是您必须声明其高度才能正常工作,而没有高度的边界仍然位于块的外部并影响渲染(即垂直节奏)。
jerclarke

1
这不允许设置单个边框的样式,在这种情况下,许多人可能会对使用property感到满意outline
洛伦兹·洛绍尔

1
请注意jeremyclarke注释,因为如果不设置高度,代码将无法工作。旁注:只要div正在使用该属性,max-height也会起作用,如果高度未达到max-height,它将不会起作用。

7
供应商前缀可以掉线box-sizing caniuse.com/#search=box-sizing
thelostspore

378

您也可以像这样使用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(盒子阴影功能)


30
喜欢这种解决方案,因为无论高度如何设置,边框都能将边框完全保留在盒子内。如果您希望边框在框外完全无效,则是完美的选择。以下是2像素的边框的CSS:“插入0像素2像素0像素0像素0像素#DDD”
jerclarke

11
首选解决方案。顺便说一句,今天所有主要的浏览器都支持无前缀的普通盒阴影。
指针为空

2
缺点是某些浏览器无法正确打印阴影,并始终将其打印为#000。如果您需要能够打印页面,则可以将其用作显示挡块。
罗布·福克斯

2
太棒了!我认为这比第一个答案要好。
AGamePlayer

1
尝试了所有其他方法。
Ahsan Arshad

88

可能这是迟来的答案,但我想与我的发现分享一下。我在答案中找到了2种新方法来解决此问题:

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

是的,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;
}

这是jsFiddle示例,说明了box-shadowborder和“ normal” border 之间的区别。这样,边框和框的总宽度(包括边框)为100px。

有关盒影的更多信息:此处

通过轮廓CSS属性进行边框

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

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

有关大纲的更多信息:这里


+1表示轮廓,这是一种非常有效的方法,甚至您的w3schools页面都提到:«仅当指定!DOCTYPE时,IE8才支持outline属性。»
Armfoot

3
注意:轮廓线不考虑边框半径(已在Chrome中测试)
Nick

45

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

对于下边框:

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

对于顶部边框:

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

28

使用伪元素

.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这些样式,可以对所选元素的虚拟最后一个子元素进行样式设置。content属性创建一个匿名替换元素

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

这种方法不会影响主要元素内容的放置,这与使用 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>

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

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


完善!我发现如果您需要在上使用它,它也可以使用:Before
spasticninja 2015年

优秀!唯一适用于包含画廊图像的锚标签的解决方案。我喜欢这样的事实,它不会按比例缩小图像,而是在视觉上剪切边缘。
RyszardJędraszyk'16

21

尽管使用box-shadowoutline属性的解决方案已经充分回答了这个问题,但我还是想为所有落在这里的人(如我自己)在此问题上稍作扩展,以寻找具有偏移

假设您有一个100px x 100px的黑色,div并且需要用白色边框插入-具有内部偏移量(为5px)(例如),这仍然可以通过上述属性来完成。

盒子阴影

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

有了这些知识,框阴影声明将为:

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

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

外形轮廓偏移

与上述效果相同,大纲声明为:

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

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


Codepen示范


15

您可以使用这些属性,outlineoutline-offset使用负值而不是使用regular 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>


谢谢你,这个答案在2019年拯救了我的一天:)
alx

美丽!这应该是“一个”!
佩德罗·费雷拉

7

我知道这有点老了,但是由于关键字“ 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

为了在新旧浏览器之间呈现一致,请添加一个双容器,外部包含宽度,内部包含边框。

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

仅当您的精确宽度比添加额外的标记更重要时,这显然很明显!


2

如果使用box-sizing:border-box不仅意味着border,padding,margin等。所有元素都将位于父元素的内部。

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>


那句话到底是什么?
Chud37 '18

0

最好的跨浏览器解决方案(主要用于IE支持),例如@Steve,说的是使div的宽度和高度为98px,而不是在其周围添加边框1px,或者您可以为div的背景图像制作100x100 px并在其上绘制边框。


0

您可以查看带有偏移的轮廓,但这需要在div上存在一些填充。或者,您也可以绝对将border 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上摆弄空白以适应您的需要。


0

一个更现代的解决方案可能是使用css variablescalccalc受到广泛支持,但variablesIE11中尚未提供(可使用polyfills)。

:root {
  box-width: 100px;
  border-width: 1px;
}

#box {
  width: calc(var(--box-width) - var(--border-width));
}

尽管这确实使用了一些计算方法,但最初的问题却想避免这种计算方法。我认为这是使用计算的合适时机,因为它们由CSS本身控制。它也不需要额外的标记或挪用以后可能需要的其他CSS属性。

仅当不需要固定高度时,此解决方案才真正有用。


0

我上面没有提到的一种解决方案是您在输入上进行填充的情况,我有99%的时间这样做。您可以按照以下方式进行操作:

input {
  padding: 8px;
}

input.invalid {
  border: 2px solid red;
  padding: 6px; // 8px - border or "calc(8px - 2px)"
}

我喜欢的是每侧都有边框+填充+过渡属性的完整菜单。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.