CSS 中,可以通過使用 border-radius 屬性來讓盒子變圓。這個屬性可以設置一個或多個半徑值來定義一個盒子的角。例如:
.box { border-radius: 10px; }
以上代碼會將所有角都變成圓角,半徑為 10px。
如果想指定某個特定角的半徑,可以使用下面這些屬性:
- border-top-left-radius:設置左上角的半徑
- border-top-right-radius:設置右上角的半徑
- border-bottom-left-radius:設置左下角的半徑
- border-bottom-right-radius:設置右下角的半徑
例如,以下代碼會將左上角和右下角變?yōu)閳A角:
.box { border-top-left-radius: 20px; border-bottom-right-radius: 20px; }
除了使用固定像素值外,還可以使用百分比值來設置半徑。例如:
.box { border-radius: 50%; }
以上代碼會將所有角都變成半徑為盒子寬度的 50% 的圓角。
在 CSS3 中,還可以使用橢圓形的 border-radius 屬性,可以同時指定水平和垂直方向的半徑值。例如:
.box { border-radius: 50% / 20%; }
以上代碼會將所有角變成橢圓形,水平半徑是盒子寬度的 50%,垂直半徑是盒子高度的 20%。
總之,CSS 中的 border-radius 屬性非常靈活,可以讓開發(fā)者輕松創(chuàng)建不同形狀的盒子。
上一篇css中盒子怎么并排
下一篇php iis 404