使用CSS3插入border-radius

有没有办法用css3创建边界半径？ (无图像)

我需要这样的边框半径：

解决方法

通过所有CSS和HTML(无图像等)实现此目标的最佳方式是每个Lea Verou的 using CSS3 gradients。从她的解决方案：

div.round {
    background:
        -moz-radial-gradient(0 100%,circle,rgba(204,0) 14px,#c00 15px),-moz-radial-gradient(100% 100%,-moz-radial-gradient(100% 0,-moz-radial-gradient(0 0,#c00 15px);
    background:
         -o-radial-gradient(0 100%,-o-radial-gradient(100% 100%,-o-radial-gradient(100% 0,-o-radial-gradient(0 0,#c00 15px);
    background:
         -webkit-radial-gradient(0 100%,-webkit-radial-gradient(100% 100%,-webkit-radial-gradient(100% 0,-webkit-radial-gradient(0 0,#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和渐变的支持，因此应该被视为渐进增强，或者如果它对设计至关重要，那么您应该为旧版浏览器提供基于图像的回退(尤其是不支持渐变的IE)通过IE9)。

原文地址：https://www.jb51.cc/css/219204.html