使用CSS3插入边框半径

Question

有没有办法用css3创建插入边界半径？（无图像）

我需要这样的边界半径：

Answer 1

我发现用所有CSS和HTML（没有图像等）实现此目的的最佳方法是使用 Lea Verou的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;}最终结果是一组带有曲线的透明渐变。观看完整的JSFiddle演示，并试用它的外观。显然，这取决于支持rgba和gradient，因此应被视为一个渐进增强，或者如果它是必不可少的设计，你应该提供对旧的浏览器（尤其是IE浏览器，不支持基于图像的回退gradient通过IE9甚至达到）。