html 边框半径,使用CSS3插入边框半径

我发现用所有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甚至达到)。