盒子-文字阴影

HTML+CSS3盒子-文字阴影

** 一. HTML+CSS3盒子-文字阴影**
box-shadow：是你个css3的一个新属性，用来实现阴影效果，阴影分为内阴影和外阴影两个效果，可以通过逗号添加多个阴影效果。
box-shadow阴影用法

box-shadow: inset offset-x offset-y blur-radius spread-radius color,....;

box-shadow代码解析

1. inset
   有inset则为内阴影，没有inset则为外阴影，默认为外阴影。
2. offset-x
   横向阴影的大小，正值阴影在右边，负值阴影在左边，0的时候阴影中盒子后面，看不见的，如果 有blur-radius值会有模糊效果。
3. offset-y
   纵向阴影的大小。值同offset-x。
4. blur-radius
   阴影模糊程度，值越大。阴影越模糊。
5. spread-radius
   阴影的扩大缩小，正值时，阴影扩大；负值时，阴影缩小，默认为0，和 盒子同样大。

.Box Shadow {
	width: 100px;
	height: 100px;
	background-color: pink;
	box-shadow: 10px 10px 10px -4px rgb(0,0,0, .3);
}

效果如下↓

二. 文字阴影
text-shadow用法介绍

text-shadow: 5px 5px 5px #000;

对应着上面4个数值
x轴（可正可负） y轴（可正可负） 模糊距离（正值） 阴影颜色

.text shading {
	text-shadow: 3px 3px 3px #000;
}

效果如下↓

注意
正值使阴影往右/下移动，负值往左/上移动
阴影的颜色是可选的，如果颜色没填，就使用从父级继承的颜色。然而，在不同的浏览器下可能 会有所不同。