在CSS3中,有許多屬性可以用來改變元素的弧度,讓我們的頁面變得更加豐富多彩。其中,最常用的是border-radius(邊框半徑)屬性。
.box { width: 200px; height: 200px; background-color: #c5e1a5; border-radius: 50%; }
上面的代碼會使一個200x200的正方形元素變成一個圓形元素。border-radius的值50%表示將元素的寬度和高度都設置為半徑。
我們還可以同時設置不同的水平和垂直半徑,以實現橢圓形效果。
.box { width: 200px; height: 150px; background-color: #c5e1a5; border-radius: 50%/25%; }
上面的代碼會將一個200x150的矩形元素變成一個水平半徑為寬度一半,垂直半徑為高度四分之一的橢圓形元素。
除此之外,我們還可以設置每個角的半徑。
.box { width: 200px; height: 200px; background-color: #c5e1a5; border-radius: 20px 0px 40px 60px; }
上面的代碼會使一個200x200的正方形元素的左上角設置20px的半徑、右上角不設置、右下角設置40px的半徑、左下角設置60px的半徑。
總結來說,border-radius是一個非常實用的屬性,可以讓我們在頁面中制作出各種形狀的元素,提升頁面的美觀程度。
上一篇css3中特性被拆分
下一篇css3中新增偽類