CSS 如何使用css为任何元素提供边框而不将边框宽度添加到元素的整个宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2748637/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to give border to any element using css without adding border-width to the whole width of element?
提问by Jitendra Vyas
How to give border to any element using css without adding border-width to the whole width of element?
如何使用css为任何元素提供边框而不将边框宽度添加到元素的整个宽度？
Like in Photoshop we can give stroke- Inside , center and outside
就像在 Photoshop 中一样，我们可以给stroke-Inside, center和outside
I think default css border properties is center like center in photoshop, am i right?
我认为默认的 css 边框属性在 photoshop 中就像 center 一样居中，对吗？
I want to give border inside the box not outside. and don't want to include border width in box width.
我想在盒子里面而不是外面给边框。并且不想在框宽度中包含边框宽度。
回答by abenson
outline:1px solid white;
This won't add the extra width and height.
这不会增加额外的宽度和高度。
回答by Chad
Check out CSS box-sizing...
看看 CSS box-sizing ...
The box-sizing CSS3 property can do this. The border-box value (as opposed to the content-box default) makes the final rendered box the declared width, and any border and padding cut inside the box. You can now safely declare your element to be of 100% width, including pixel-based padding and border, and accomplish your goal perfectly.
box-sizing CSS3 属性可以做到这一点。border-box 值（与 content-box 默认值相反）使最终渲染的框具有声明的宽度，以及框内的任何边框和填充。您现在可以安全地将元素声明为 100% 宽度，包括基于像素的填充和边框，并完美地实现您的目标。
- -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
- -moz-box-sizing: border-box; /* Firefox, other Gecko */
- box-sizing: border-box; /* Opera/IE 8+ */
- -webkit-box-sizing: 边框框；/* Safari/Chrome, 其他 WebKit */
- -moz-box-sizing: 边框框；/* 火狐，其他壁虎 */
- box-sizing: 边框框；/* Opera/IE 8+ */
I'd suggest creating a mixin to handle this for you. You can find more information on box-sizing at W3c http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
我建议创建一个 mixin 来为你处理这个问题。您可以在 W3c http://www.w3schools.com/cssref/css3_pr_box-sizing.asp上找到有关 box-sizing 的更多信息
回答by James Bryant
Depending on your intended browser support you can use the box-shadowproperty.
根据您预期的浏览器支持，您可以使用该box-shadow属性。
You can set the blur value to 0 and the spread to what ever thickness you're after. The great thing about box shadow is that you can control whether it is drawn outside (by default) or inside (using the insetproperty).
您可以将模糊值设置为 0，并将扩展设置为您想要的任何厚度。box shadow 的好处在于您可以控制它是在外部（默认情况下）还是在内部（使用inset属性）绘制。
Example:
例子：
box-shadow: 0 0 0 1px black; // Outside black border 1px
or
或者
box-shadow: 0 0 0 1px white inset; // Inside white border 1px
One great advantage of using box shadow is you can get creative by using multiple box shadows:
使用框阴影的一大优势是您可以通过使用多个框阴影来获得创意：
box-shadow: 0 0 0 3px black, 0 0 0 1px white inset;
The only thing I can't say is what difference this will make rendering performance wise. I would assume it might become an issue if you had hundreds of elements using this technique on the screen at once.
我唯一不能说的是这将使渲染性能有什么不同。如果屏幕上同时有数百个使用这种技术的元素，我认为这可能会成为一个问题。
回答by mikevoermans
I ran into the same issue.
我遇到了同样的问题。
.right-border {
position: relative;
}
.right-border:after {
content: '';
display: block;
position: absolute;
top: 0; right: 0;
width: 1px;
height: 100%;
background: #e0e0e0;
}
This answer allows you to specify one single side. And would work in IE8+ - unlike using box-shadow.
此答案允许您指定一侧。并且可以在 IE8+ 中工作 - 与使用 box-shadow 不同。
Of course change your pseudo elements properties as you need to single out a specific side.
当然，当您需要挑出特定的一面时，请更改您的伪元素属性。
* New and Improved *
* 新的和改进的 *
&:before {
content: '';
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid #b7b7b7;
}
This allows ability to use border and hit multiple sides of a box.
这允许使用边框并击中框的多个侧面。
回答by GibboK
Use box-sizing: border-boxin order to create a border INSIDEa div without modifying div width.
使用box-sizing: border-box以创建一个边界INSIDE一个div，而无需修改DIV宽度。
Use outlineto create a border OUTSIDEa div without modifying div width.
使用outline创建边界OUTSIDE一个div，而无需修改DIV宽度。
Here an example: https://jsfiddle.net/4000cae9/1/
这里有一个例子：https: //jsfiddle.net/4000cae9/1/
Notes:
border-boxcurrently it is not supported by IE
注意：
border-box目前 IE 不支持
Support:
支持：
http://caniuse.com/#feat=outline
http://caniuse.com/#feat=outline
http://caniuse.com/#search=border-box
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>
回答by ChrisD
As abenson said, you can use an outlinebut one gotcha is that Opera might draw a "non-rectangular shape". Another option that seems to work is to use negative margins, such as this css:
正如 abenson 所说，您可以使用轮廓，但一个问题是 Opera 可能会绘制“非矩形形状”。另一个似乎有效的选择是使用负边距，例如这个 css：
div {
float:left;
width: 50%;
border:1px solid black;
margin: -1px;
}
With this html:
使用这个 html：
<body>
<div>A block</div>
<div>Another block</div>
</body>
One other less clean option is to add extra markup to the html. For example, you set the width of an outer element and add the border to the inner one. The CSS:
另一种不太干净的选择是向 html 添加额外的标记。例如，您设置外部元素的宽度并将边框添加到内部元素。CSS：
.outer { width: 50%; float: left;}
.inner { border: 1px solid black; }
And the html:
和 html：
<body>
<div class="outer">
<div class="inner">A block</div>
</div>
<div class="outer">
<div class="inner">Another block</div>
<div>
</body>
回答by Jake Wilson
Use padding when there is no border. Remove padding when there is a border.
没有边框时使用填充。有边框时删除填充。
.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;
}
Essentially, just replace the 2px padding with 2px borders. Div size remains the same.
本质上，只需用 2px 边框替换 2px 填充。Div 大小保持不变。
回答by vfilby
In your case can you fudge it by subtracting half the border from the padding? (-2.5 from the padding if your border is 5px wide, you can't have negative padding so to go smaller reduce the overall width of the box). You can add an extra 2.5px to the margin to keep the overall box the same size.
在您的情况下，您可以通过从填充中减去一半的边框来捏造它吗？（-2.5 距填充，如果您的边框宽度为 5px，则不能使用负填充，因此要缩小以减小框的整体宽度）。您可以向边距添加额外的 2.5 像素，以保持整个框的大小相同。
I really don't like this suggestion, but I don't think there is a way do handle this cleanly.
我真的不喜欢这个建议，但我认为没有办法干净利落地处理这个问题。
回答by BalusC
Thus, you're trying to achieve the same as the well known IE box model bug? That's not possible. Or you want to support clients with IE on Windows only and choose a doctypewhich forces IE into quirksmode.
因此，您是否正在尝试实现与众所周知的IE 框模型错误相同的功能？那是不可能的。或者，您只想在 Windows 上支持使用 IE 的客户端，并选择强制 IE 进入quirksmode的文档类型。
回答by Jake Wilson
Another option, if your background color is solid:
另一种选择，如果您的背景颜色是纯色的：
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
}
