border-radius是CSS3設(shè)置圓角的一個(gè)屬性,其屬性值得單位
可以使用:em、px、百分比等等。但是,border-radius屬性值得參數(shù)形式
有好多種,那么具體都代表什么意思呢?下面以實(shí)際例子分析一下:
首先是最常見(jiàn)的一種形式,一個(gè)值:border-radius: 值;
border-radius: 10px;
這段代碼代表同時(shí)將元素的每個(gè)圓角的"水平半徑"和"垂直半徑"都設(shè)置為10px。
border-radius可以同時(shí)設(shè)置1到4個(gè)值,(類似于margin與padding
的值得設(shè)定)。如果設(shè)置四個(gè)值,則依次對(duì)應(yīng)左上角、右上角、右下角、
左下角(順時(shí)針順序)。
代碼:
border-radius: 10px 20px 0px 30px;
如果設(shè)置兩個(gè)值,表示左上角和右下角使用第一個(gè)值,右上角和左下角使用第二個(gè)值。
代碼:
border-radius: 20px 0px;
如果設(shè)置三個(gè)值,表示左上角使用第一個(gè)值,右上角和左下角使用第二個(gè)值,
右下角使用第三個(gè)值。
代碼:
border-radius: 10px 0px 50px;
border-radius還可以用斜杠二組值。這時(shí),第一組值表示水平半徑,
第二組值表示垂直半徑。每組值也可以同時(shí)設(shè)置1到4個(gè)值,
應(yīng)用規(guī)則是依次對(duì)應(yīng)左上角、右上角、右下角、左下角(順時(shí)針順序)。
代碼:
border-radius:50px/30px;
代碼:
border-radius: 50px 30px 20px 10px / 20px 30px 20px 30px;
border-top-right-radius: 50px;
border-top-right-radius: 50px 20px;
【 微信掃一掃 】