CSS是一種用于定義頁面展示樣式的樣式表語言。在頁面制作中,我們經常需要用CSS來畫塊。下面介紹一些CSS畫塊的方法。
.box { width: 100px; height: 100px; background-color: red; }
上面的代碼是使用CSS畫一個100px*100px的紅色塊。其中,.box
是塊的類名,可以在HTML中通過class="box"
來引用它。
.box { width: 100px; height: 100px; border: 1px solid black; }
上面的代碼是給塊加上邊框。border
是CSS中用來定義邊框的屬性,其中1px
是邊框寬度,solid
是邊框樣式,black
是邊框顏色。
.box { background-image: url("image.png"); background-repeat: no-repeat; }
上面的代碼是給塊加上背景圖片。其中,background-image
屬性指定背景圖片的URL,background-repeat
屬性控制圖片是否重復,no-repeat
表示不重復。
.box { width: 100px; height: 100px; border-radius: 50%; background-color: red; }
上面的代碼是畫一個圓形塊。在CSS3中,border-radius
屬性可以用來指定邊框圓角半徑,如果將它的值設置為50%,就可以畫出圓形。
以上是一些常用的CSS畫塊的方法。在實際使用中,我們可以根據需求自由組合這些屬性,畫出各種形狀的塊。