首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

CSS3之元素影子

2013-10-08 
CSS3之元素阴影  今天为大家分享CSS3中的box-shadow,这个属性适用于给元素设置阴影的。我们用这个box-shado

CSS3之元素阴影

  今天为大家分享CSS3中的box-shadow,这个属性适用于给元素设置阴影的。我们用这个box-shadow属性,可以省去以前遇到阴影就切图的笨方法了。

 

  一、box-shadow的语法

 

  1、语法:

  对象选择器 {box-shadow:阴影类型 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}

  注:box-shadow可以使用一个或多个投影,如果使用多个投影时必须需要用逗号“,”分开。


  2、取值:

  box-shadow属性最多可以有6个参数设置,他们分别取值:

  (1)阴影类型:此参数是一个可选值,如果不设值,其默认的投影方式是外阴影;如果取其唯一值“inset”,就是将外阴影变成内阴影,也就是说设置阴影类型为“inset”时,其投影就是内阴影;

  (2)阴影水平偏移量:是指阴影水平偏移量其值可以是正负值可以取正负值,如果值为正值,则阴影在对象的右边,反之其值为负值时,阴影在对象的左边;

  (3)阴影的垂直偏移量是指阴影的垂直偏移量,其值也可以是正负值,如果为正值,阴影在对象的底部,反之其值为负值时,阴影在对象的顶部;

  (4)阴影模糊半径:此参数是可选,,但其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;

  (5)阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值是,则缩小

  (6)阴影颜色:此参数可选,如果不设定任何颜色时,浏览器会取默认色,但各浏览器默认色不一样,特别是在webkit内核下的safari和chrome浏览器将无色,也就是透明,建议不要省略此参数。


  二、box-shadow的兼容方法

 

  1、box-shadow的各浏览器前缀

  (1)Firefox4.0-

  -moz-box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;

  (2)Safari and Google chrome10.0-

  -webkit-box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;

  (3)Firefox4.0+ 、 Google chrome 10.0+ 、 Oprea10.5+ and IE9

  box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;


  2、box-shadow兼容IE6-8

  (1)IE滤镜方法

  因为IE9以下是不支持CSS3的box-shadow的,但为了处理这个兼容问题,我们可以在IE下使用IE的shadow阴影滤镜来实现。



  2、例子2——只设置阴影模糊半径和阴影颜色


  CSS代码:


  3、例子3——边框效果


  CSS代码:


  4、例子4——内阴影inset效果


  CSS代码:



  5、例子5——给body顶部增加一个阴影


  CSS代码:


  6、例子6——悬浮效果

 

  CSS代码:



  7、例子7——IE阴影兼容


  CSS代码:



  那们今天我们有关CSS3的box-shadow就说到这里了,感兴趣的朋友请观众有关CSS3的博文更新情况,如果你有更好的学习想法,可以随时联系我。




热点排行