如何僅使用 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 的支持，因此請考慮對舊版瀏覽器使用基於圖像的後備。

以上是如何僅使用 CSS3 建立內嵌邊框半徑？的詳細內容。更多資訊請關注PHP中文網其他相關文章！