CSS3 的插入邊框半徑

在CSS3 中，實(shí)現(xiàn)插入邊框半徑（其中角向內(nèi)而不是向外彎曲）可以不使用圖像也具有挑戰(zhàn)性。然而，有一個(gè)巧妙的解決方案，利用 CSS3 漸層。

Lea Verou 巧妙的方法涉及創(chuàng)建一系列帶有曲線的透明漸變，從而創(chuàng)建內(nèi)嵌邊框半徑的錯(cuò)覺。透過精確定位這些漸變，您可以實(shí)現(xiàn)所需的圓角效果。

她的CSS 程式碼如下所示，為具有所需插入邊框半徑的元素定義了一個(gè)自訂類別：

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;
}

將此類應(yīng)用於元素將產(chǎn)生具有內(nèi)嵌邊框半徑的元素。值得注意的是，該技術(shù)依賴 rgba 和漸進(jìn)的支持，使其成為一種漸進(jìn)式增強(qiáng)策略。對於較舊的瀏覽器或不支援漸層的瀏覽器，建議使用基於圖像的後備來提供支援。

以上是如何僅使用 CSS3 建立內(nèi)嵌邊框半徑？的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！