萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> divcssborderradius屬性介紹

divcssborderradius屬性介紹

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

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

}

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

相關推薦:

CSS的注釋部分編程引申的方法

copyright © 萬盛學電腦網 all rights reserved