1. 程式人生 > >背景、邊框、邊距相關屬性

背景、邊框、邊距相關屬性

背景、邊框、邊距相關屬性

1、背景的一系誒屬性

background:設定物件的背景樣式,這是一個符合的屬性,裡面還有一堆。
1、background-color,設定背景顏色,但是如果同時設定了背景色和背景圖片,則背景色將會被覆蓋。
2、background-image,設定背景圖片,需要使用url()函式指定圖片的位置
3、background-repeat,圖片是否平鋪,一般都是no-repeat,平鋪太醜了
4、background-attachment,設定背景圖片是否隨著滾動條滾動,scroll,會滾動,fixed表示不會滾
5、background-position,設定背景圖片的位置,雪碧圖會用上
6、background-size,css3新增的,設定背景圖的大小

2、邊框的一些屬性

border:這是個複合屬性,裡面也有一堆
1、border-color,設定邊框的顏色,上、右、下、左的順序(順時針),如果只設一個,代表四個方向都是這一個顏色;如果只設兩個,表示上下是一個顏色,左右是另一個顏色;如果設三個,表示,上下是兩種不同的顏色,左右是一種顏色。
2、border-style,設定邊框的線形,也是有順時針四個方向
3、border-width,設定邊框的寬度,也是有順時針四個方向
我一般這麼寫:
在這裡插入圖片描述
4、border-radius,css3新增的圓角邊框,指定圓角邊框的半徑,半徑越大,圓角的程度就越大。如果指定一個長度,4個圓角都適用這個長度做半徑;指定兩個長度,一個是左上角和右下角的半徑,另一個是右上角和左下角的半徑,跟上面類似。

3、opacity控制透明度

css3新增的屬性,
opacity:0,表示完全透明
opacity:1,表示完全不透明
一旦設定了這個屬性,不管是背景色、邊框都會受到影響。

4、padding和margin相關屬性

padding,複合屬性,有top,left,bottom,right,設定內邊距
margin,複合屬性,有top,left,bottom,right,設定外邊距