HTML+CSS3盒子-文字阴影
** 一. HTML+CSS3盒子-文字阴影**
box-shadow:是你个css3的一个新属性,用来实现阴影效果,阴影分为内阴影和外阴影两个效果,可以通过逗号添加多个阴影效果。
box-shadow阴影用法
box-shadow: inset offset-x offset-y blur-radius spread-radius color,....;
box-shadow代码解析
- inset
有inset则为内阴影,没有inset则为外阴影,默认为外阴影。 - offset-x
横向阴影的大小,正值阴影在右边,负值阴影在左边,0的时候阴影中盒子后面,看不见的,如果 有blur-radius值会有模糊效果。 - offset-y
纵向阴影的大小。值同offset-x。 - blur-radius
阴影模糊程度,值越大。阴影越模糊。 - 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;
}
效果如下↓
注意
正值使阴影往右/下移动,负值往左/上移动
阴影的颜色是可选的,如果颜色没填,就使用从父级继承的颜色。然而,在不同的浏览器下可能 会有所不同。