CSS 外边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9102900/
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
CSS Outside Border
提问by user1083320
I want to be able to draw a border OUTSIDE of my Div! So if my div is say 20px by 20px, I want a 1px border outside of this (so in essence, I get a div 22x22px large).
我希望能够在我的 Div 之外绘制边框！所以如果我的 div 是 20px x 20px，我想要一个 1px 的边框（所以本质上，我得到一个 22x22px 大的 div）。
I understand that I can just make the div 22x22 to start with, but for reasons I have, I need the borders to be on the outside.
我知道我可以将 div 设为 22x22，但出于我的原因，我需要将边框放在外面。
CSS outline works, but I want only border-bottom or border-top thingy, so something like outline-bottom, which does not work, is what I want.
CSS 大纲有效，但我只想要边框底部或边框顶部的东西，所以像大纲底部这样不起作用的东西是我想要的。
Is there a way to do this?
有没有办法做到这一点？
Thanks
谢谢
回答by Bear In Hat
I think you've got your understanding of the two properties off a little. Border affects the outside edge of the element, making the element different in size. Outline will not change the size or position of the element (takes up no space) and goes outside the border. From your description you want to use the border property.
我认为您对这两个属性的理解有所不同。边框影响元素的外边缘，使元素大小不同。Outline 不会改变元素的大小或位置（不占用空间）并超出边界。根据您的描述，您要使用边框属性。
Look at the simple example below in your browser:
在浏览器中查看下面的简单示例：
<div style="height: 100px; width: 100px; background: black; color: white; outline: thick solid #00ff00">SOME TEXT HERE</div>
<div style="height: 100px; width: 100px; background: black; color: white; border-left: thick solid #00ff00">SOME TEXT HERE</div>Notice how the border pushes the bottom div over, but the outline doesn't move the top div and the outline actually overlaps the bottom div.
请注意边框如何将底部 div 推过，但轮廓不会移动顶部 div，并且轮廓实际上与底部 div 重叠。
回答by Benjaroo
Try the outline property W3Schools - CSS Outline
尝试使用大纲属性W3Schools - CSS Outline
Outline will not interfere with widths and lenghts of the elements/divs!
轮廓不会干扰元素/div 的宽度和长度！
Please click the link I provided at the bottom to see working demosof the the different ways you can make borders, and inner/inline borders, even ones that do not disrupt the dimensions of the element! No need to add extra divs every time, as mentioned in another answer!
请点击我在底部提供的链接，查看制作边框和内/内联边框的不同方式的工作演示，即使是那些不会破坏元素尺寸的方式！无需每次都添加额外的 div，如另一个答案中所述！
You can also combine borders with outlines, and if you like, box-shadows (also shown via link)
您还可以将边框与轮廓相结合，如果您愿意，还可以将框阴影（也通过链接显示）
<head>
<style type="text/css" ref="stylesheet">
div {
width:22px;
height:22px;
outline:1px solid black;
}
</style>
</head>
<div>
outlined
</div>
Usually by default, 'border:' puts the border on the outside of the width, measurement, adding to the overall dimensions, unless you use the 'inset' value:
通常默认情况下，'border:' 将边框放在宽度、测量值的外部，添加到整体尺寸，除非您使用 'inset' 值：
div {border: inset solid 1px black};
But 'outline:' is an extra border outside of the border, and of course still adds extra width/length to the element.
但是 'outline:' 是边框外的额外边框，当然仍然为元素增加了额外的宽度/长度。
Hope this helps
希望这可以帮助
PS: I also was inspired to make this for you: Using borders, outlines, and box-shadows
PS：我也受到启发为你做这个：使用边框、轮廓和框阴影
回答by dfsq
IsisCode gives you a good solution. Another one is to position border div insideparent div. Check this example http://jsfiddle.net/A2tu9/
IsisCode 为您提供了一个很好的解决方案。另一种方法是将边框 div 定位在父 div 内。检查这个例子http://jsfiddle.net/A2tu9/
UPD:You can also use pseudo element :after(:before), in this case HTML will not be polluted with extra markup:
UPD：您也可以使用伪元素:after( :before)，在这种情况下 HTML 不会被额外的标记污染：
.my-div {
position: relative;
padding: 4px;
...
}
.my-div:after {
content: '';
position: absolute;
top: -3px;
left: -3px;
bottom: -3px;
right: -3px;
border: 1px #888 solid;
}
Demo: http://jsfiddle.net/A2tu9/191/
演示：http: //jsfiddle.net/A2tu9/191/
回答by K-Gun
Why not simply using background-clip?
为什么不简单地使用background-clip？
-webkit-background-clip: padding;
-moz-background-clip: padding;
background-clip: padding-box;
See:
http://caniuse.com/#search=background-clip
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
https://css-tricks.com/almanac/properties/b/background-clip
请参阅：
http: //caniuse.com/#search=background-clip
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
https://css-tricks.com/almanac /properties/b/background-clip
回答by chrisdhanaraj
Way late, but I just ran into a similar issue.
My solution was pseudo elements - no additional markup, and you get to draw the border without affecting the width.
Position the pseudo element absolutely (with the main positioned relatively) and whammo.
太晚了，但我刚刚遇到了类似的问题。
我的解决方案是伪元素——没有额外的标记，你可以在不影响宽度的情况下绘制边框。
绝对定位伪元素（与主要定位相对）和 whammo。
See below, JSFiddle here.
见下文，这里是 JSFiddle。
.hello {
position: relative;
/* Styling not important */
background: black;
color: white;
padding: 20px;
width: 200px;
height: 200px;
}
.hello::before {
content: "";
position: absolute;
display: block;
top: 0;
left: -5px;
right: -5px;
bottom: 0;
border-left: 5px solid red;
border-right: 5px solid red;
z-index: -1;
}
回答by IsisCode
Put your div inside another div, apply the border to the outer div with namount of padding/margin where nis the space you want between them.
将您的 div 放在另一个 div 中，将边框应用到具有n个填充/边距的外部 div，其中n是您想要它们之间的空间。
回答by Daniel Eduardo Delgado Diaz
I shared two solutions depending on your needs:
我根据您的需要分享了两种解决方案：
<style type="text/css" ref="stylesheet">
.border-inside-box {
border: 1px solid black;
}
.border-inside-box-v1 {
outline: 1px solid black; /* 'border-radius' not available */
}
.border-outside-box-v2 {
box-shadow: 0 0 0 1px black; /* 'border-style' not available (dashed, solid, etc) */
}
</style>
