CSS - 边界半径和内部弯曲的实心边界
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20382037/
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 - border radius and solid border curved inside
提问by Guesser
This style give a border with smoothed corners on the outside of the border but the insides of the corners are sqaured of, can I make them rounded as well?
这种样式在边框外侧提供带有平滑角的边框，但角的内部是方形的，我可以将它们也弄圆吗？
img{
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
border:white solid 8px;
}
Note the problem is only with images the suggestions submitted work only with a div.
请注意，问题仅与图像有关，提交的建议仅适用于 div。
回答by Marc
you can use border-radius values as twice the border-size value to obtain inside-rounded corners.
您可以使用边框半径值作为边框大小值的两倍来获得内部圆角。
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
border:white solid 8px;
回答by oezi
you have to set a border-radius-value thats higher than your border-width. take a look at this jsfiddle.
您必须设置一个高于您的 border-width的 border-radius-value 。看看这个 jsfiddle。
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
border:black solid 8px;
回答by Josh Davenport
This technique requires that the image is wrapped in a div because — and I'm not sure why — in Safari psuedo-elements won't seem to render for imgelements.
这种技术要求图像被包裹在一个 div 中，因为——我不知道为什么——在 Safari 中，伪元素似乎不会为img元素呈现。
HTML
HTML
<div class="box"><img src="http://placehold.it/200x200/" /></div>
CSS
CSS
.box {
display:inline-block; /* Makes the wrapper flush with the image */
line-height: 0; /* Stops a gap appearing underneath image */
}
.box, .box:before {
border: 8px solid #fff;
border-radius: 16px;
position: relative;
z-index: 1;
}
.box:before {
display: block;
content: '';
position: absolute;
top: -8px;
left: -8px;
right: -8px;
bottom: -8px;
z-index: 2;
}
The :beforepsuedo-element sits on top of the image with its inner curved border, essentially simulating the inner curved border on the image. It's a pretty nice workaround that achieves the curved inner border that you.
所述:before伪元件坐落在其内弯曲边界的图像的上面，实质上模拟所述图像上的内侧弯曲的边界。这是一个非常好的解决方法，可以实现您的弯曲内边框。
The border-widthof the wrapper and image and top, left, rightand bottompositions of the :beforepseudo element needs to be half that of the border radius of the wrapper element.
该border-width包装和形象和top，left，right和bottom的位置:before伪元素需要是包装元素的边界半径的一半。
回答by adam187
You can mimik inside border with second border of child element
您可以使用子元素的第二个边框模仿内部边框
<style type="text/css">
body {
background:#f0f5f9;
}
.border-outside{
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
border:white solid 8px;
background-color: white;
}
.border-inside {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background: #7bada4;
}
</style>
<body>
<div class="border-outside">
<div class="border-inside">
content
</div>
</div>
</body>
