用CSS3插入边界半径
有没有办法用css3创build插入边界半径？ （没有图像）
我需要这样的边框半径：
我发现用所有CSS和HTML（无图像等）实现这一目标的最好方法是使用CSS3渐变 ，每个Lea Verou。 从她的解决scheme：
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; } 最终结果是一组具有曲线的透明渐变。 查看完整的JSFiddle进行演示，并玩弄它的外观。
显然，这取决于对rgba和gradient支持，因此应该被视为渐进式增强，或者如果对于devise来说是必不可less的，则应该为旧版浏览器提供基于图像的回退（尤其是IE，它不支持gradient通过IE9）。
你可以通过绝对定位透明的圆形元素在与阴影的angular落实现这一点。 我使用了包含跨度，框阴影，边框和伪select器的隐藏溢出div的组合。
看看我的例子 。
这是您需要开始的基本的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>
我不认为这是可能的，如果angular落必须是透明的，但是如果背景是已知的，你可以在每个angular落用圆angular边框创build一个div。 如果这些div被赋予与页面背景相同的背景色，效果将起作用。
看我的例子在这里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>
你可以用新的css3-边界图像来达到这个效果（好吧，它是图像，但是它没有问题）。 但是这是相当新的，并没有得到广泛的支持（所有体面的浏览器（带有前缀），除了IE是精确的））。
一篇关于csstricks上的边框图像的好文章。
浏览器支持
这看起来不可能。 我试图用一个负值的边界半径来看看会发生什么，但没有任何效果。
编辑：
即使你把盒子分成较小的部分，在某些时候，你仍然必须创build一个透明的插入angular落。 透明度是一个棘手的部分，可能会阻止没有图像的可能性。 基本上，你必须能够渲染一个透明的圆形，并且包含一个不透明的周围的bg（如果在CSS中这是可能的，我很想知道如何）
如果你不需要透明度，有办法做到这一点。
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>
嗯，你可以使用这个小技巧来创build插入边界半径
然后为了支持透明度，你可能需要在其间添加其他的块。 或多或less像旧的圆形图像曾经被完成的方式; 透明图像的每个angular落都有一个跨度。 并跨越两侧和顶部填补空的空间。 而不是使用图像，你可以使用这个技巧来做到这一点在CSS中。
