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 和漸進的支持，使其成為一種漸進式增強策略。對於較舊的瀏覽器或不支援漸層的瀏覽器，建議使用基於圖像的後備來提供支援。