border-radius是向元素添加圓角邊框。
使用方法:
border-radius:10px; /* 所有角都使用半徑為10px的圓角 */
border-radius: 5px 4px 3px 2px; /* 四個(gè)半徑值分別是左上角、右上角、右下角和左下角,順時(shí)針 */
不要以為border-radius的值只能用px單位,你還可以用百分比或者em,但兼容性目前還不太好。
實(shí)心上半圓:
方法:把高度(height)設(shè)為寬度(width)的一半,并且只設(shè)置左上角和右上角的半徑與元素的高度一致(大于也是可以的)。
div{ height:50px;/*是width的一半*/ width:100px; background:#9da; border-radius:50px 50px 0 0;/*半徑至少設(shè)置為height的值*/ }
實(shí)心圓:
方法:把寬度(width)與高度(height)值設(shè)置為一致(也就是正方形),并且四個(gè)圓角值都設(shè)置為它們值的一半。如下代碼:
div{ height:100px;/*與width設(shè)置一致*/ width:100px; background:#9da; border-radius:50px;/*四個(gè)圓角值都設(shè)置為寬度或高度值的一半*/ }
怎么樣,制作“實(shí)心上半圓”畫(huà)法學(xué)會(huì)了,是否會(huì)舉一反三制作一個(gè)“實(shí)心左半圓形”呢?
在右邊窗口編輯區(qū)的第18行進(jìn)行操作,將DIV變成左半圓形。
border-radius:50px 0 0 50px;
請(qǐng)驗(yàn)證,完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多,請(qǐng)先驗(yàn)證,完成再次請(qǐng)求
打開(kāi)微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書(shū)簽
舉報(bào)