CSS3中的borderradius屬性介紹

我們為大家收集整理了關於CSS3中的borderradius屬性，以方便大家參考。

Border-radius

border-radius是一種縮寫方法。如果“/”前後的值都存在，那麼“/”前面的值設置其水平半徑，“/”後面值設置其垂直半徑。如果沒有“/”，則水平和垂直半徑相等。

CSS Code復制內容到剪貼板

border-radius: 2em 1em 4em / 0.5em 3em;

等價於：

CSS Code復制內容到剪貼板

border-top-left-radius: 2em 0.5em;

border-top-rightright-radius: 1em 3em;

border-bottom-rightright-radius: 4em 0.5em;

border-bottom-left-radius: 1em 3em;

如何使用border-radius屬性

下面是border-radius屬性最基本的使用方法。

CSS Code復制內容到剪貼板

.round {

border-radius: 5px; /* 所有角都使用半徑為5px的圓角，此屬性為CSS3標准屬性 */

-moz-border-radius: 5px; /* Mozilla浏覽器的私有屬性 */

-webkit-border-radius: 5px; /* Webkit浏覽器的私有屬性 */

border-radius: 5px 4px 3px 2px; /* 四個半徑值分別是左上角、右上角、右下角和左下角 */

}

希望大家可以學會CSS3中的borderradius屬性.想了解更多精彩內容，請關注我們的網站!

相關推薦：

提高divcss網頁渲染效率的方法