使用CSS3插入边界半径

我发现使用所有CSS和HTML（无图像等）实现这一点的最好方法是使用CSS3渐变，每Lea Verou一个。从她的解决方案来看：

div.round{
背景：
-moz径向梯度（0 100%，圆形，rgba（204,0,0,0）14px，#c00 15px），
-moz径向梯度（100%100%，圆形，rgba（204,0,0,0）14px，#c00 15px），
-moz径向梯度（100%0，圆形，rgba（204,0,0,0）14px，#c00 15px），
-moz径向梯度（0，圆，rgba（204,0,0,0）14px，#c00 15px）；
背景：
-o-径向梯度（0 100%，圆形，rgba（204,0,0,0）14px，#c00 15px），
-o-径向梯度（100%100%，圆形，rgba（204,0,0,0）14px，#c00 15px），
-o-径向梯度（100%0，圆形，rgba（204,0,0,0）14px，#c00 15px），
-o-径向梯度（0，圆，rgba（204,0,0,0）14px，#c00 15px）；
背景：
-webkit径向梯度（0 100%，圆形，rgba（204,0,0,0）14px，#c00 15px），
-webkit径向梯度（100%100%，圆形，rgba（204,0,0,0）14px，#c00 15px），
-webkit径向梯度（100%0，圆形，rgba（204,0,0,0）14px，#c00 15px），
-webkit径向梯度（0 0，圆形，rgba（204,0,0,0）14px，#c00 15px）；
背景位置：左下、右下、右上、左上；
-moz背景大小：50%50%；
-webkit背景大小：50%50%；
背景大小：50%50%；
背景重复：无重复；
}

最终结果是一组带有曲线的透明渐变。请参阅完整的JSFIDLE以获得演示，并按照其外观进行操作

显然，这取决于对rgba和gradient的支持，因此应将其视为渐进式增强，或者如果这对设计至关重要，则应为较旧的浏览器提供基于图像的回退（尤其是IE，它甚至不支持通过IE9实现的gradient）