background
| 屬性 | 屬性值 | 描述 | |||||
|---|---|---|---|---|---|---|---|
| background-color | 單詞顏色表示法、rgb、十六進制 | 設置元素的背景顏色 | |||||
| background-image | url(‘http://www.aaa.com/1.png‘) | 給一個元素設置一個或多個背景圖像 | |||||
| background-position | top,left,center,百分比，px, | 為每一個背景圖片設置初始位置 | |||||
| background-repeat | repeat-x\ | repeat-y\ | repeat\ | spance\ | round\ | no-repeat | 定義背景圖像的重復方式。 背景圖像可以沿着水平軸，垂直軸，兩個軸重復，或者根本不重復。 |
background-size
背景圖比例
CSS Sprite雪碧圖技術
使用雪碧圖的使用場景
靜態圖片，不隨用戶信息的變化而變化
小圖片，圖片容量比較小(2~3k)
加載量比較大
一些大圖不建議制作雪碧圖
優點
有效的減少HTTP請求數量
加速內容顯示
每次請求一次，就會和服務器連接一次，建立連接是需要額外的時間開銷的。
雪碧圖的實現原理
它通過css的背景屬性的backrground-position的來控制雪碧圖的顯示。
控制一個層，可顯示的區域范圍大消息，通過一個窗口，進行背景圖的移動。
border-radius
圓角屬性
畫圓
border-radius: 50%;
圓環
border: 3px solid #FC0107;
border-radius: 50%;
box-shadow 陰影
語法：
box-shadow: h-shadow v-shadow blur color inset;
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平陰影的位置。允許負值 |
| v-shadow | 必需。垂直陰影的位置。允許負值。 |
| blur | 可選。模糊距離。 |
| color | 可選。陰影的顏色。 |
| inset | 可選。將外部陰影 (outset) 改為內部陰影。 |
img拉伸填滿
min-height: 130px; 圖片的高度可以大於130px，如果小於130px拉成130
max-width: 130px; 圖片的寬度可以小於130px，如果大於130壓縮成130px