CSS3是Web開發中非常重要的一個技術,不僅可以實現頁面布局,還可以美化頁面元素。其中一個比較常見的應用就是畫圓形。
要畫出一個圓形,需要用到css的border-radius屬性。border-radius可以控制一個元素的邊框圓角的弧度,當設置邊框的寬度和顏色時,就可以形成一個圓形的形狀。
.circle { width: 100px; height: 100px; border-radius: 50%; border: 2px solid #000; }
上面的代碼定義了一個名為.circle的類,該類的元素的寬高都為100px,border-radius設置為50%,表示要把元素的邊框角度弧度設置成50%的圓形。border屬性設置邊框的寬度為2px,顏色為黑色。這樣就可以畫出一個100px寬高的黑色圓形。
當然,也可以把圓形的背景設置為其他顏色,來形成不同的效果。
.circle2 { width: 100px; height: 100px; border-radius: 50%; background-color: #f00; }
上面的代碼定義了一個名為.circle2的類,該類的元素和圓形的元素類似,但背景色設置成了紅色。這樣就可以畫出一個100px寬高的紅色圓形。
CSS3的border-radius屬性不僅可以畫圓形,還可以畫橢圓、半圓等形狀,給我們的Web開發帶來了更多的靈活性和美觀性。
上一篇Java常量和字符串區別
下一篇php aes gcm