css3 盒陰影box-shadow

1.描述：

box-shadow能夠設置一個或多個下拉陰影的框，此屬性使用於盒模型不是用來設置文字陰影，設置文字陰影能夠使用text-shadow

2.語法：

box-shadow：h-shadow v-shadow blur spread color inset

◆h-shadow：(必)定義陰影的水平位移，可負(正數：陰影出如今邊框的右邊，負數：陰影出如今邊框的左邊  0：不顯示)

◆v-shadow：(必)定義陰影的垂直位移，可負(正數：陰影出如今邊框的下邊，負數：陰影出如今邊框的上邊  0：不顯示)

◆blur：(可選)模糊距離(0：不顯示陰影，負數：不顯示陰影  正數：數值越大陰影越模糊)

◆spread：(可選)陰影的大小

◆color：(可選)陰影的顏色

◆inset：(可選)從外層的陰影(開始時)改變陰影內側陰影(設置該值：陰影出如今邊框的裏邊，取消該值：陰影出如今邊框的外邊)

總結：h-shadow v-shadow 屬性決定的是陰影的偏移量，blur spread屬性決定陰影的模糊程度與大小

          color屬性決定的是陰影的顏色

3.例子

1】設置h-shadow v-shadow color

.box-shadow{
    width:200px;
    height:100px;
    background:#FF8C69;
    margin-left:100px;
    box-shadow:10px 10px #888;//設置h-shadow v-shadow color
}

2】在上面例子基礎上添加blur屬性

box-shadow:10px 10px 5px #888;//添加blur屬性爲5px

由此圖可見，陰影部分變模糊了

改變blur的值爲30px

box-shadow:10px 10px 30px #888;//改變blur爲30px

結論：blur的值越大，陰影越模糊

3】添加spread屬性

box-shadow:10px 10px 5px 20px #888;//設置spread值爲20px

4】h-shadow v-shadow 設置爲0

box-shadow:0px 0px 10px #888;

h-shadow與v-shadow設置爲0，陰影在元素的正下方，正好被塊元素遮擋， 設置blur，spread屬性就會讓陰影從塊元素向四方擴散

框和陰影的關係：只要存在框，它就存在陰影，默認狀況下，陰影與框寬高一致，陰影重疊在框的下面不可見

5】在"4】"的基礎上設置spread爲20px

box-shadow:0px 0px 10px 20px #888;

6】設置四個邊框不一樣顏色的陰影

.box-shadow{
	margin-top:50px;
	width:200px;
	height:100px;
	background:#FF8C69;
	margin-left:100px;
	box-shadow:-10px 0px 10px #DDA0DD,//左邊陰影
	0px -10px 10px #E6E6FA,//上邊陰影
	10px 0px 10px #CDCDB4,//右邊陰影
	0px 10px 10px #CAFF70;//下邊陰影
}

7】設置半透明陰影

透明以前陰影

.box-shadow{
	margin-top:50px;
	width:200px;
	height:100px;
	background:#FF8C69;
	margin-left:100px;
	box-shadow:50px 50px rgba(221, 160, 221,.4);
}

8】設置一個方向山多個陰影

box-shadow:50px 50px rgba(221, 160, 221,.4),120px 120px rgba(192, 255, 62,.4);