css3图层阴影 box-shadow

css3的box-shadow属性可以实现图层阴影效果。还有一个和它相关的属性text-shadow,是用来实现文本阴影效果,这将在下一篇文章里和大家一块了解。

box-shadow语法:

box-shadow:阴影类型 X水平偏移(可取正负值) Y垂直偏移(可取正负值) 阴影大小 阴影扩展 阴影颜色值

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

浏览器兼容性:

不同的浏览器兼容性不同,mozilla内核的浏览器写法如下(但新版本的火狐浏览器已经不需要再添加):

-moz-box-shadow:阴影类型 X水平偏移(可取正负值) Y垂直偏移(可取正负值) 阴影大小 阴影扩展 阴影颜色值

webkit内核的浏览器写法如下:

-webkit-box-shadow:阴影类型 X水平偏移(可取正负值) Y垂直偏移(可取正负值) 阴影大小 阴影扩展 阴影颜色值

实例一:

<div class="shadow"></div>
.shadow{
	width:200px;
	height:50px;
	box-shadow:3px 3px 3px 3px #000;
	/*-moz-box-shadow:3px 3px 3px 3px #000;    //以火狐为代表的mozilla内核浏览器,火狐现在的版本已经支持这个属性,所以不用再加-moz*/
	-webkit-box-shadow:3px 3px 3px 3px #000;
}

效果图:box-shadow

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

实例二:

<div class="shadow"></div>
.shadow{
	width:200px;
	height:50px;
	box-shadow:0 -5px 5px 0 red,5px 0 5px 0 yellow,0 5px 5px 0 green,-5px 0 5px 0 blue;
	/*-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*/
	-webkit-box-shadow:0 -5px 5px 0 red,5px 0 5px 0 yellow,0 5px 5px 0 green,-5px 0 5px 0 blue;
}

效果图:

 

马上分享给你的朋友吧~

css3图层阴影 box-shadow》上有 3 条评论

  1. Pingback 引用通告: css3图层阴影 box-shadow | 站长网志

  2. Pingback 引用通告: css3 text-shadow文字阴影 _ 雨打浮萍

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>