CSS3 shdaow 属性

一、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>

猜你喜欢

转载自blog.csdn.net/u011146423/article/details/85264557