使用 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 和漸進，這可能不是所有舊版瀏覽器都支持，並且需要針對不支援漸進的舊瀏覽器的漸進增強或基於圖像的後備。