如何使用css为任何元素提供边框而不将边框宽度添加到元素的整个宽度？答案

【问题标题】：How to give border to any element using css without adding border-width to the whole width of element?如何使用css为任何元素提供边框而不将边框宽度添加到元素的整个宽度？
【发布时间】：2011-02-14 11:20:57
【问题描述】：

如何使用 css 为任何元素赋予边框而不将边框宽度添加到元素的整个宽度？

就像在 Photoshop 中一样，我们可以给笔画-内部、中心和外部

我认为默认的 css 边框属性是像 photoshop 中的中心一样的中心，对吗？

我想在盒子里面而不是外面给边框。并且不想在框宽度中包含边框宽度。

【问题讨论】：

标签： css

【解决方案1】：

因此，您想达到与众所周知的IE box model bug 相同的效果吗？那是不可能的。或者您只想在 Windows 上支持使用 IE 的客户端，然后选择 doctype 强制 IE 进入 quirksmode。

【讨论】：

【解决方案2】：

在您的情况下，您可以通过从填充中减去一半边框来伪造它吗？（如果您的边框为 5px 宽，则距填充 -2.5，您不能有负填充，因此变小会减小框的整体宽度）。您可以在边距上添加额外的 2.5 像素，以保持整个框的大小相同。

我真的不喜欢这个建议，但我认为没有办法干净地处理这个问题。

【讨论】：

【解决方案3】：

outline:1px solid white;

这不会增加额外的宽度和高度。

【讨论】：

注意：轮廓不定义边，所以这只有在所有边都设置样式时才有效。
我添加了一个答案，允许您只在一侧加边框。
只是一个注释，它不会遵循您在元素上可能拥有的任何边框半径的曲线，因此您最终会得到一个方形边框。
但是不支持radious。

【解决方案4】：

正如 abenson 所说，您可以使用outline，但有一个问题是 Opera 可能会绘制“非矩形形状”。另一个似乎可行的选择是使用负边距，例如这个 css：

div {
  float:left;
  width: 50%;
  border:1px solid black;
  margin: -1px;

}

有了这个 html：

<body>
  <div>A block</div>
  <div>Another block</div>
</body>

另一个不太干净的选项是向 html 添加额外的标记。例如，您设置外部元素的宽度并将边框添加到内部元素。 CSS：

.outer { width: 50%; float: left;}
.inner { border: 1px solid black; }

还有html：

<body>
  <div class="outer">
    <div class="inner">A block</div>
  </div>
  <div class="outer">
    <div class="inner">Another block</div>
  <div>
</body>

【讨论】：

【解决方案5】：

根据您预期的浏览器支持，您可以使用box-shadow 属性。

您可以将模糊值设置为 0，并将散布设置为您所追求的任何厚度。盒子阴影的好处在于您可以控制它是绘制在外部（默认情况下）还是内部（使用inset 属性）。

例子：

box-shadow: 0 0 0 1px black; // Outside black border 1px

或

box-shadow: 0 0 0 1px white inset; // Inside white border 1px

使用盒子阴影的一大优势是您可以通过使用多个盒子阴影来获得创意：

box-shadow: 0 0 0 3px black, 0 0 0 1px white inset;

我唯一不能说的是这会对渲染性能产生什么影响。如果你有数百个元素同时在屏幕上使用这种技术，我认为这可能会成为一个问题。

【讨论】：

【解决方案6】：

我遇到了同样的问题。

.right-border {
    position: relative;
}

.right-border:after {
    content: '';
    display: block;
    position: absolute;
        top: 0; right: 0;
    width: 1px;
    height: 100%;
    background: #e0e0e0;
}

此答案允许您指定单边。并且可以在 IE8+ 中工作 - 不像使用 box-shadow。

当然，当你需要挑出特定的一面时，改变你的伪元素属性。

* 新的和改进的 *

&:before {
content: '';
display: block;
position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid #b7b7b7;
}

这允许使用边框并点击框的多个边。

【讨论】：

【解决方案7】：

当没有边框时使用填充。有边框时移除内边距。

.myDiv {
    width: 100px;
    height: 100px;
    padding-left: 2px;
    padding-right: 2px;
}

.myDiv:hover {
    padding-left: 0;
    padding-right: 0;
    border-left: 2px solid red;
    border-right: 2px solid red;
}

基本上，只需将 2px 填充替换为 2px 边框即可。 div 大小保持不变。

【讨论】：

【解决方案8】：

另一个选项，如果你的背景颜色是纯色的：

body { background-color: #FFF; }

.myDiv {
    width: 100px;
    height: 100px;
    border: 3px solid #FFF;  // Border is essentially invisible since background is also #FFF;
}

.myDiv:hover {
    border-color: blue;  // Just change the border color
}

【讨论】：

您可以将#FFF 替换为透明，然后您无需记住更改两个值。您的建议的好处是，如果您需要虚线边框，这将适用于 box-shadow 在这方面缺乏的地方。

【解决方案9】：

查看 CSS box-sizing...

box-sizing CSS3 属性可以做到这一点。 border-box 值（与 content-box 默认值相反）使最终呈现的框具有声明的宽度，并且在框内切割任何边框和填充。您现在可以安全地将您的元素声明为 100% 宽度，包括基于像素的填充和边框，并完美地实现您的目标。

-webkit-box-sizing: 边框； /* Safari/Chrome，其他 WebKit */
-moz-box-sizing：边框框； /* Firefox，其他 Gecko */
框大小：边框框； /* Opera/IE 8+ */

我建议创建一个 mixin 来为您处理这个问题。你可以在 W3c http://www.w3schools.com/cssref/css3_pr_box-sizing.asp找到更多关于 box-sizing 的信息

【讨论】：

这是最好的答案，虽然我不认为你真的需要所有的前缀。 caniuse.com/#feat=css3-boxsizing
^ Justin 是正确的，您不再需要前缀。 box-sizing 就足够了。

【解决方案10】：

使用box-sizing: border-box 来创建一个边框INSIDE一个div而不修改div的宽度。

使用outline创建一个边框OUTSIDE一个div而不修改div的宽度。

这里是一个例子： https://jsfiddle.net/4000cae9/1/

注意事项： border-box目前IE不支持

支持：

http://caniuse.com/#feat=outline

http://caniuse.com/#search=border-box

#test, #test2 {
    width: 100px;
    height:100px;
    background-color:yellow;
}
#test {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 10px dashed blue;
}
#test2 {
    outline: 10px dashed red;
}


<p>Use box-sizing: border-box to create a border INSIDE a div without modifying div width.</p>
<div id="test">border-box</div>
<p>Use outline to create a border OUTSIDE a div without modifying div width.</p>
<div id="test2">outline</div>

【讨论】：

【解决方案11】：

轮廓：3px 纯黑色 ||边框：3px 纯黑色

div{
height:50px;
width:150px;
text-align:center;

}

div{    /*this is what you need ! */
outline:1px solid black
}

<div>
hello world
</div>

【讨论】：

【解决方案12】：

通常，布局偏移是问题所在。

如果您不需要border-radius，那么outline: 1px solid black; 可以工作。

如果这样做，请使边框透明并在应该显示时更改其颜色：

/* RELEVANT */
.my-div {
  border-radius: 8px;
  border: 2px solid transparent;
}

.my-div:hover {
  border: 2px solid #ffffffa8;
}



/* NOT RELEVANT */
.pretty {
  color: white;
  padding: 10px 20px;
  background: #0077b6;
  font-size: 16px;
  transition: border .15s ease-out;
  cursor:pointer;
}

<button class="pretty my-div">
  Button
</button>

【讨论】：