CSS 边界位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33942849/
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
Border Position
提问by Spedwards
I want to try and achieve something in CSS using borders but they don't seem to have something I want. In Photoshop, when you add a Stroke (border), you select the position. Outside, Inside, or Center. Outside being where the entire border wraps around the object. Inside is where it sits on the inside (obviously), and center being half and half.
我想尝试使用边框在 CSS 中实现一些东西，但它们似乎没有我想要的东西。在 Photoshop 中，当您添加描边（边框）时，您选择了位置。外部、内部或中心。在整个边界环绕对象的地方之外。里面是它坐在里面的地方（显然），中心是一半。
I want a 2pxborder that's positioned in the center. So it shows 1px outside and 1pxinside. Is there anyway to do this with CSS? I imagine I can do it with a box-shadowof some kind but I'm horrendous at shadows in CSS.
我想要一个2px位于中心的边框。所以它在外部和1px内部显示 1px 。有没有办法用CSS来做到这一点？我想我可以用box-shadow某种方式来做到这一点，但我对 CSS 中的阴影感到恐惧。
There's also the issue of having to be pure CSS so I can't lay an image over it. Can someone possibly help me out with this.
还有一个问题是必须是纯 CSS，所以我不能在它上面放置图像。有人可以帮我解决这个问题。
Thanks.
谢谢。
回答by Mi-Creativity
There's a work around, since borderrepresents outer stroke for you, you can make use of outlinecss property with outline-offsetset to negative value to have the inner 1pxstroke( 1 )JS Fiddle
有一个解决方法，因为border代表您的外笔画，您可以使用设置为负值的outlinecss 属性outline-offset来获得内1px笔画（1）JS Fiddle
body {
padding-top: 10px;
}
#test {
width: 250px;
height: 200px;
background-color: orange;
margin: 0 auto;
border: 1px navy solid; /* outer stroke */
outline: 1px navy solid; /* inner stroke */
outline-offset: -2px; /* negative border width + outline width */
}<div id="test"></div>( 1 )As the above fiddle might not demonstrate the explanation good enough, here's the same example with two colored strokes and 4pxfor each stroke instead of 1pxDemo Fiddle
( 1 )由于上面的小提琴可能不能很好地说明解释，这里有两个彩色笔画和4px每个笔画的相同示例，而不是1px演示小提琴
Resources:
资源：
http://caniuse.com/#search=outline
http://caniuse.com/#search=outline
https://developer.mozilla.org/en/docs/Web/CSS/outline-offset
https://developer.mozilla.org/en/docs/Web/CSS/outline-offset
http://www.w3schools.com/cssref/css3_pr_outline-offset.asp
http://www.w3schools.com/cssref/css3_pr_outline-offset.asp
回答by Paulie_D
Perhaps with a suitable sized absolutely positioned pseudo-element?
也许有一个合适大小的绝对定位伪元素？
div {
box-sizing: border-box;
width: 200px;
height: 200px;
border: 1px solid black;
margin: 1em auto;
position: relative;
}
div:after {
content: '';
position: absolute;
top:-6px;
left: -6px;
width: calc(100% - 12px);
height: calc(100% - 12px);
border:12px solid rgba(255,0,0,0.5)
}<div></div>回答by Rolf
You could nudge the container so that it would look like it's an inner border. For example, if you have have a 2pxleft border and want it to appear as an inner border, you can just offset the whole container to the right, like this:
您可以轻推容器，使其看起来像是内部边框。例如，如果您有一个2px左边框并希望它显示为内边框，您可以将整个容器向右偏移，如下所示：
position: relative;
left: 2px;
You might have to do other corrections, such as reducing the width of the container by 2px.
您可能需要进行其他更正，例如将容器的宽度减小2px.
