一、box-shdaow 属性
基础说明:
外阴影:box-shadow: X轴 Y轴 Rpx color1,X轴 Y轴 Rpx color2,...;
属性说明(顺序依次对应): 阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值(大小) 阴影的颜色
内阴影:box-shadow: X轴 Y轴 Rpx color1 inset,X轴 Y轴 Rpx color2 inset,...;
默认是外阴影 内阴影:inset 可以设置成内部阴影
注(PS):此属性使用于盒模型 如(div,p,h1,h2,h3,h4,h5,h6等)不是用来设置文字阴影
如果设置文字阴影请参考知识点:text-shadow(同理)
因为是新属性,为了兼容各主流浏览器并支持这些主浏览器的较低版本,基于主流浏览器上使用box-shadow属性时,
我们需要将属性的名称写成-webkit-box-shadow的形式,Firefox浏览器则需要写成-moz-box-shadow的形式,
欧朋浏览器-o-box-shadow,IE>9 -ms-box-shadow
二、text-shadow 属性
text-shadow 曾经在 CSS2 中就出现过,但在 CSS 2.1版本中又被抛弃了,现在 CSS3 版本又重新捡回来了。这说明 text-shadow 这个属性非常值得我们做前端的人员重视,而且 CSS3 这么多属性中,我个人觉得 text-shadow运用得是最多的一个属性,作为我们前端人员我觉得有必要学习并掌握这个 text-shadow 属性。
text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*
也就是:
text-shadow:[颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]...
或者
text-shadow:[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)],[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)]...
<div class="demo11">text-shadow</div>
<style>
.demo11 {
color: #fff;
text-shadow: -1px -1px rgba(197, 223, 248,0.8),
-2px -2px rgba(197, 223, 248,0.8),
-3px -3px rgba(197, 223, 248,0.8),
-4px -4px rgba(197, 223, 248,0.8),
-5px -5px rgba(197, 223, 248,0.8),
-6px -6px rgba(197, 223, 248,0.8);
}
</style>