CSS中的borderradius屬性介紹

大家知道CSS中的borderradius屬性嗎?下面我們就給大家詳細介紹一下吧!我們積累了一些經驗，在此拿出來與大家分享下，請大家互相指正。

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; /* 四個半徑值分別是左上角、右上角、右下角和左下角 */

}

相信大家已經學會CSS中的borderradius屬性了吧!感謝大家對我們網站的支持!

相關推薦：

CSS網頁渲染效率怎麼就高了呢