css圓，背景,img填滿等樣式

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