如何使用 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中文網其他相關文章！