CSS3 的插入邊框半徑

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

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

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

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

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

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