CSS3 的插入边框半径

在 CSS3 中，实现插入边框半径（其中角向内而不是向外弯曲）可以不使用图像也具有挑战性。然而，有一个巧妙的解决方案，利用 CSS3 渐变。

Lea Verou 巧妙的方法涉及创建一系列带有曲线的透明渐变，创建嵌入边框半径的幻觉。通过精确定位这些渐变，您可以实现所需的圆角效果。

她的 CSS 代码如下所示，为具有所需插入边框半径的元素定义了一个自定义类：

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;
}

将此类应用于元素将产生具有内嵌边框半径的元素。值得注意的是，该技术依赖于 rgba 和渐变的支持，使其成为一种渐进增强策略。对于较旧的浏览器或不支持渐变的浏览器，建议使用基于图像的后备来提供支持。