AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > css教程

详解CSS3的图层阴影和文字阴影效果使用

51自学网 http://www.wanshiok.com
CSS3,阴影

box-shadow图层阴影

box-shadow:阴影类型 X水平偏移(可取正负值) Y垂直偏移(可取正负值) 阴影大小 阴影扩展 阴影颜色值
阴影类型可以省略,默认为外投影,当它的值为inset时,为内阴影效果。
X水平偏移和Y垂直偏移可取正负值,当X为负值是投影在左边,为正时投影在右边。当Y为负值时投影在上面,为正时投影在下面。
阴影大小和扩展与ps里面的原理一样。

浏览器兼容性:
不同的浏览器兼容性不同,mozilla内核的浏览器写法如下(但新版本的火狐浏览器已经不需要再添加):
-moz-box-shadow:阴影类型 X水平偏移(可取正负值) Y垂直偏移(可取正负值) 阴影大小 阴影扩展 阴影颜色值
webkit内核的浏览器写法如下:
-webkit-box-shadow:阴影类型 X水平偏移(可取正负值) Y垂直偏移(可取正负值) 阴影大小 阴影扩展 阴影颜色值

实例一:

CSS Code复制内容到剪贴板
  1. <div class="shadow"></div>   
  2. .shadow{   
  3.  width:200px;   
  4.  height:50px;   
  5.  box-shadow:3px 3px 3px 3px #000;   
  6.  /*-moz-box-shadow:3px 3px 3px 3px #000;    //以火狐为代表的mozilla内核浏览器,火狐现在的版本已经支持这个属性,所以不用再加-moz*/  
  7.  -webkit-box-shadow:3px 3px 3px 3px #000;   
  8. }  

效果图:

把box-shadow投影类型改为inset,效果图:

实例二:

CSS Code复制内容到剪贴板
  1. <div class="shadow"></div>   
  2. .shadow{   
  3.  width:200px;   
  4.  height:50px;   
  5.  box-shadow:0 -5px 5px 0 red,5px 0 5px 0 yellow,0 5px 5px 0 green,-5px 0 5px 0 blue;   
  6.  /*-moz-box-shadow:0 -5px 5px 0 red,5px 0 5px 0 yellow,0 5px 5px 0 green,-5px 0 5px 0 blue;    //以火狐为代表的mozilla内核浏览器,火狐现在的版本已经支持这个属性,所以不用再加-moz*/  
  7.  -webkit-box-shadow:0 -5px 5px 0 red,5px 0 5px 0 yellow,0 5px 5px 0 green,-5px 0 5px 0 blue;   
  8. }  

效果图:

text-shadow文字阴影

上面我们讨论了关于css3图层阴影 box-shadow来实现图层阴影的效果,今天我们来共同学习一下如何实现文字阴影的效果,将用到css3的另外一个属性text-shadow,这两个效果分别增强了图层和文字的质感,创建立体效果。

语法:

XML/HTML Code复制内容到剪贴板
  1. text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*   

text-shadow:X轴上的位移(正负皆可),Y轴上的位移(正负皆可),阴影的宽度,阴影的颜色值

说明:
和图层阴影相似,它也可以对同一对象应用一组或多组阴影效果,用逗号隔开。X轴偏移可以为正负,当X为正时向右偏移,为负时向左偏移。Y轴偏移可以为正负,当X为正时向下偏移,为负时向上偏移。阴影的颜色值可以是#xxx,也可以是rgb,还可以是rgba透明色。

实例:text-shadow

XML/HTML Code复制内容到剪贴板
  1. <h1 style="font-family:Microsoft Yahei; font-size:28px; color:#333; text-shadow:2px 2px 5px #f60;">雨打浮萍</h1>  

显示效果如下:

对比box-shadow

XML/HTML Code复制内容到剪贴板
  1. <h2 style="font-family:Microsoft Yahei; font-size:18px; color:#333; width:200px; line-height:30px; text-align:center; box-shadow:2px 2px 5px #f60;">专注于web前端开发</h2>  

效果如下:

显示效果如下:


CSS3,阴影  
上一篇:实例讲解CSS3中的box-flex弹性盒属性布局  下一篇:SCSS移动端页面遮罩层效果的实现及常见问题解决