CSS3的文本阴影和盒子阴影

1、文本阴影属性

	text-shadow:10px 10px 10px red;
	
	注：     第一个值  ： 水平方向的距离     （必须有的：支持负值）
			 第二个值  ： 垂直方向的距离     （必须有的：支持负值）
			 第三个值  ：  阴影的模糊程度    （不支持负值）
			 第四个值  ：  阴影的颜色
		 
		 第一个值  和 第二个值得位置不能互换；
		 当给同一个文字设置多个阴影的时候，阴影和阴影之间用逗号隔开：
		 如：text-shadow:10px 10px 1px greenyellow,10px 10px 1px greenyellow,10px 10px 1px greenyellow,10px 10px 1px greenyellow;
	说明：水平、垂直阴影的位置允许负值
	可进行多阴影设置(逗号分隔的方式)

下面是修改文本阴影属性值的效果图：

1.主要代码为：

.text{
				margin: 70px auto;
				width: 300px;
				height: 300px;
				font-size: 30px;
				text-shadow:10px 10px 1px greenyellow;
			}

效果如图：

2.更改文本阴影属性值 text-shadow:-10px 10px 1px greenyellow;更改的是第一个值。如图

3.更改文本阴影属性值 text-shadow:-10px -10px 1px greenyellow;更改的是第二个值。如图

4.更改文本阴影属性值 text-shadow:-10px -10px 20px greenyellow;更改的是第三个值。如图

5.更改文本阴影属性值 text-shadow:-10px -10px 20px red;更改的是第四个值。如图

2、盒子阴影属性

	box-shadow 盒子阴影：
		X-shadow	必需的。水平阴影的位置。允许负值
		Y-shadow	必需的。垂直阴影的位置。允许负值
		blur	可选。模糊距离
		spread	可选。阴影的大小
		color	可选。阴影的颜色。
		inset	可选。从外层的阴影（开始时）改变阴影内侧阴影
		盒子阴影的属性：box-shadow: 10px 10px 5px 10px greedyellow inset;
		当给一个盒子设置多个阴影的时候，阴影和阴影之间用逗号隔开：
		box-shadow: 10px 10px 5px 10px greedyellow inset，10px 10px 5px 10px greedyellow inset，10px 10px 5px 10px greedyellow inset;			

下面是更改盒子阴影属性值的效果图：

1.主要代码为：

.text{
				margin: 70px auto;
				width: 100px;
				height: 100px;
				font-size: 30px;
				box-shadow: 10px 10px 10px 10px greenyellow ;
			}

效果图为：

2.更改盒子阴影属性值 box-shadow: -10px 10px 10px 10px greenyellow;更改的是第一个值，也就是X-shadow（水平阴影的位置）。 如图：

3.更改盒子阴影属性值 box-shadow: -10px -10px 10px 10px greenyellow ;更改的是第二个值，也就是Y-shadow(垂直阴影的位置)。如图：

4.修改盒子阴影属性值 box-shadow: -10px -10px 30px 10px greenyellow ;更改的是第三个值，也就是blur（模糊距离）。如图：

5.修改盒子阴影属性值 box-shadow: -10px -10px 10px 30px greenyellow ;更改的是第四个值，也就是spread（阴影大小）（注：也将第三个值进行了更改，方便辨认）。如图：

6.修改盒子阴影属性值 box-shadow: -10px -10px 10px 30px red ;更改的是第五个值，也就是color（阴影颜色）如图：

7.修改盒子阴影属性值 box-shadow: -10px -10px 10px 30px red inset;更改的添加了第六个值，也就是inset（内阴影）。（注：默认为外阴影） 如图：

两张图可以进行比较，上图为内阴影图下图为外阴影图（ box-shadow: -10px -10px 10px 10px greenyellow ;更改了X,Y阴影位置）