如何使用 CSS3 渐变创建内嵌边框半径？

使用 CSS3 渐变插入边框半径

通过使用 CSS3 渐变可以实现没有图像的插入边框半径。这种方法涉及分层几个透明的径向渐变，以创建元素周围向内弯曲的边框的错觉。

以下 CSS 代码采用 Lea Verou 的解决方案，使用渐变创建内嵌边框半径：

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 和渐变，这可能不被所有旧版浏览器支持，并且需要对于不支持渐变的旧版浏览器，渐进式增强或基于图像的后备。

以上是如何使用 CSS3 渐变创建内嵌边框半径？的详细内容。更多信息请关注PHP中文网其他相关文章！