css文字阴影和盒子阴影

css文字阴影和盒子阴影

1. 文字阴影：text-shadow（4个参数：水平阴影位置，垂直阴影位置，阴影模糊距离，阴影颜色）。
   css代码：

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

HTML代码：

<h1>文字阴影</h1>

页面效果：

注意：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代码：

   <div></div>

页面效果：

现在的效果和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中，只有阴影的位置，阴影尺寸大小可以为负值，模糊距离不能为负值，控制数值的类型的参数尽量写在一起，否则样式不会生效。