css文字陰影和盒子陰影

1. 文字陰影：text-shadow（4個參數：水準陰影位置，垂直陰影位置，陰影模糊距離，陰影顔色）。

   css代碼：

h1{
	  font:bold 80px "微軟雅黑";
	  text-shadow:10px 10px 10px red;
	}
           

HTML代碼：

頁面效果：

注意：text-shadow的參數顔色可以寫在前面也可以寫在後面，但是不能寫在中間，否則沒有效果。

h1{
	  font:bold 80px "微軟雅黑";
	  text-shadow:10px 10px red 10px;
	}
           

頁面效果：

text-shadow還支援樣式疊加：

h1{
	  font:bold 80px "微軟雅黑";
	  text-shadow:10px 10px 10px red,20px 20px 20px blue,30px 30px 30px green,40px 40px 40px yellow
	}
           

頁面效果：

注意：陰影的位置可以為負值，但是陰影的模糊距離不能為負值。

2. 盒子陰影：box-shadow（6個參數：水準陰影位置，垂直陰影位置，陰影模糊距離，陰影的尺寸，陰影顔色，内部陰影/外部陰影(預設)）。

css代碼：

div{
	  width:200px;
	  height:200px;
	  background:red;
	  box-shadow:10px 10px 10px blue
	}
           

HTML代碼：

頁面效果：

現在的效果和text-shadow的效果一樣，我們來設定一下陰影的尺寸：

div{
	  width:200px;
	  height:200px;
	  background:red;
	  box-shadow:10px 10px 10px 10px blue
	}
           

頁面效果：

陰影放大了，看看能不能設定負值：

div{
	  width:200px;
	  height:200px;
	  background:red;
	  box-shadow:10px 10px 10px -10px blue
	}
           

頁面效果：

box-shadow的inset可以設定内部陰影（預設是outset(外部陰影)）：

div{
	  width:200px;
	  height:200px;
	  background:red;
	  box-shadow:inset 10px 10px 10px gray
	}
           

頁面效果：

box-shadow也可以實作樣式疊加：

div{
	  width:200px;
	  height:200px;
	  background:red;
	  box-shadow:10px 10px 10px red,20px 20px 20px blue,30px 30px 30px green,40px 40px 40px yellow
	}
           

頁面效果：

注意：在box-shadow中，隻有陰影的位置，陰影尺寸大小可以為負值，模糊距離不能為負值，控制數值的類型的參數盡量寫在一起，否則樣式不會生效。