CSS 使用 CSS3 插入边框半径
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11033615/
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
Inset border-radius with CSS3
提问by Serhiy
Is there way to create inset border radius with css3? (Without images)
有没有办法用css3创建插入边框半径？（没有图片）
I need a border radius like this:
我需要这样的边界半径：
回答by Chris Krycho
The best way I've found to achieve this with all CSS and HTML (no images, etc.) is by using CSS3 gradients, per Lea Verou. From her solution:
根据Lea Verou 的说法，我发现使用所有 CSS 和 HTML（无图像等）实现这一目标的最佳方法是使用 CSS3 渐变。从她的解决方案：
div.round {
background:
-moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
-moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
background:
-o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
-o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
background:
-webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
background-position: bottom left, bottom right, top right, top left;
-moz-background-size: 50% 50%;
-webkit-background-size: 50% 50%;
background-size: 50% 50%;
background-repeat: no-repeat;
}
The net result is a set of transparent gradients with curves. See the full JSFiddlefor a demo and to play around with the way it looks.
最终结果是一组带有曲线的透明渐变。请参阅完整的JSFiddle以获取演示并尝试使用它的外观。
Obviously this depends on support for rgbaand gradient, and accordingly should be treated as a progressive enhancement, or if it's essential to the design, you should supply an image-based fallback for older browsers (especially IE, which doesn't support gradienteven up through IE9).
显然，这取决于对rgbaand 的支持gradient，因此应该被视为渐进增强，或者如果它对设计至关重要，则您应该为旧浏览器（尤其是 IE，它不支持gradientIE9）提供基于图像的回退）。
回答by Brett Hayes
You can achieve this by absolutely positioning transparent circle elements in the corners with box shadows. I used a combination of hidden overflowed divs containing spans, box shadows, borders, and pseudo selectors.
您可以通过在带有框阴影的角落中绝对定位透明圆形元素来实现这一点。我使用了包含跨度、框阴影、边框和伪选择器的隐藏溢出 div 的组合。
Check out my example.
看看我的例子。
This is the basic HTML and CSS you need to get started:
这是您入门所需的基本 HTML 和 CSS：
a {display:inline-block; width:250px; height:100px; background:#ccc; border:2px solid #000; position:relative; margin:10px;}
a div {position: absolute; top: 0; overflow: hidden; width: 15px; height: 100%;}
a div:after {content:''; background:#000; width:2px; height:75px; position:absolute; top:12.5px;}
a div:first-of-type {left: -14px;}
a div:first-of-type:after {left:0;}
a div:last-of-type {right: -14px;}
a div:last-of-type:after {right:0;}
a span {display:block; width:30px; height:30px; background:transparent; position:absolute; bottom:-20px; right:-20px; border:2px solid #000; border-radius:25px; box-shadow:0 0 0 60px #ccc;}
a div:first-of-type span {left:-20px;}
a div:first-of-type span:first-child {top:-20px;}
a div:first-of-type span:last-child {bottom:-20px;}
a div:last-of-type span {right:-20px;}
a div:last-of-type span:first-child {top:-20px;}
a div:last-of-type span:last-child {bottom:-20px;}<a href="">
<div>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
</div>
</a>回答by John Lawrence
I don't think that it would be possible if the corners have to be transparent, however if the background is known, you can create a div in each corner with a rounded border. If those divs are then given the same background color as the page background the effect will work.
如果角落必须是透明的，我认为这是不可能的，但是如果背景已知，您可以在每个角落创建一个带有圆角边框的 div。如果这些 div 的背景颜色与页面背景相同，则效果将起作用。
See my example here http://jsfiddle.net/TdDtX/
在此处查看我的示例http://jsfiddle.net/TdDtX/
#box {
position: relative;
margin: 30px;
width: 200px;
height: 100px;
background: #ccc;
border: 1px solid #333;
}
.corner {
position: absolute;
height: 10px;
width: 10px;
border: 1px solid #333;
background-color: #fff;
}
.top-left {
top: -1px;
left: -1px;
border-radius: 0 0 100% 0;
border-width: 0 1px 1px 0;
}
.top-right {
top: -1px;
left: 190px;
border-radius: 0 0 0 100%;
border-width: 0 0 1px 1px;
}
.bottom-left {
top: 90px;
left: -1px;
border-radius: 0 100% 0 0;
border-width: 1px 1px 0 0;
}
.bottom-right {
top: 90px;
left: 190px;
border-radius: 100% 0 0 0;
border-width: 1px 0 0 1px;
}<div id="box">
<div class="corner top-left"></div>
<div class="corner top-right"></div>
<div class="corner bottom-left"></div>
<div class="corner bottom-right"></div>
</div>回答by Christoph
You could achieve this effect with the new css3-Border-images (well, it's images, but it scales without problems). But this is quite new and not very widely supported yet (well in all decent browsers (with prefixes) except IE to be precise;) ).
您可以使用新的 css3-Border-images 实现这种效果（嗯，它是图像，但它可以毫无问题地缩放）。但这是相当新的并且还没有得到广泛支持（在所有像样的浏览器（带有前缀）中，准确地说是 IE 除外；))。
A nice article about border images on csstricks.
一篇关于csstricks边框图片的好文章。
回答by Matt Coughlin
It doesn't look like that's possible. I tried a border-radius with a negative value just to see what would happen but it had no effect.
看起来这不可能。我尝试了一个带有负值的边界半径只是为了看看会发生什么，但它没有效果。
Edit:
编辑：
Even if you break the box down into smaller parts, at some point you'd still have to create a transparent inset corner. The transparency is the tricky part that might prevent this from being possible without images. Basically, you'd have to be able to render a transparent circle with a non-transparent surrounding bg (and if that's possible in CSS, I'd love to know how :)
即使你把盒子分解成更小的部分，在某些时候你仍然需要创建一个透明的插入角。透明度是一个棘手的部分，可能会阻止在没有图像的情况下实现这一点。基本上，您必须能够渲染一个带有不透明周围 bg 的透明圆圈（如果这在 CSS 中可行，我很想知道如何:)
If you don't need transparency, there are ways to do it.
如果您不需要透明度，有一些方法可以做到。
回答by Davinder Singh
body {
background: #fff;
}
.div{
position:relative;
}
.box {
background: #f7f7f7;
height: 178px;
width: 409px;
margin: 25px;
/*padding: 20px;*/
position: relative;
overflow: hidden;
border: 1px solid #ccc;
border-left: 0px;
}
.box:before {
content: "";
display: block;
background: #fff;
position: absolute;
top: -33px;
left: -263px;
width: 300px;
height: 242px;
border-radius: 300px;
border: 1px solid #ccc;
}<div class="div">
<div class="box"></div>
</div>
</body>
</html>Example: http://jsfiddle.net/dVmX3/
回答by user8696825
body {
background: #fff;
}
.div{
position:relative;
}
.box {
background: #f7f7f7;
height: 178px;
width: 409px;
margin: 25px;
/*padding: 20px;*/
position: relative;
overflow: hidden;
border: 1px solid #ccc;
border-left: 0px;
}
.box:before {
content: "";
display: block;
background: #fff;
position: absolute;
top: -33px;
left: -263px;
width: 300px;
height: 242px;
border-radius: 300px;
border: 1px solid #ccc;
}<div class="div">
<div class="box"></div>
</div>
</body>
</html>回答by Jon Mifsud
Hmm you could possibly make use of this little trick here to create Inset Border Radius
嗯，你可以利用这里的这个小技巧来创建Inset Border Radius
Then to support transparency you would have to probably add other blocks in between. More or less like the way the old rounded images used to be done; having a span for every corner with the transparent image. And spans on the sides and the top to fill up the empty space. Instead of using images you could use this trick to do it in CSS.
然后为了支持透明度，您可能必须在两者之间添加其他块。或多或少像过去的旧圆形图像的制作方式；透明图像的每个角落都有一个跨度。并跨越两侧和顶部以填补空白空间。您可以使用此技巧在 CSS 中完成此操作，而不是使用图像。
