如何使用 CSS3 渐变模拟嵌入边框半径？

使用 CSS3 渐变模拟嵌入边框半径

纯粹使用 CSS3 实现嵌入边框半径效果是一个挑战。但是，使用 CSS3 渐变，您可以模拟所需的效果。

Lea Verou 的渐变解决方案

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 和渐变的支持，旧版本不支持浏览器，特别是 Internet Explorer。因此，使用此解决方案作为渐进增强或为旧版浏览器提供基于图像的后备至关重要。

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