html5中文学习网

您的位置: 首页 > CSS3技术 » 正文

CSS3 box-shadow内阴影

[ ] 已经帮助:人解决问题

CSS3 box-shadow:

浏览器参照基准:Firefox4 and Later, Chrome5 and Later, Safari5 and Later, Opera10.53 and Later, IE9.0 and LaterxA2HTML5中文学习网 - HTML5先行者学习网

内阴影效果(偏移值都为正):

#box-shadow{ 	-moz-box-shadow:5px 5px 5px #999 inset;               /* For Firefox3.6+ */ 	-webkit-box-shadow:5px 5px 5px #999 inset;            /* For Chrome5+, Safari5+ */ 	box-shadow:5px 5px 5px #999 inset;                    /* For Latest Opera */ }

内阴影效果(偏移值都为负):

#box-shadow2{ 	-moz-box-shadow:-5px -5px 5px #999 inset;             /* For Firefox3.6+ */ 	-webkit-box-shadow:-5px -5px 5px #999 inset;          /* For Chrome5+, Safari5+ */ 	box-shadow:-5px -5px 5px #999 inset;                  /* For Latest Opera */ }

内阴影效果(水平偏移为负,垂直偏移为负):

#box-shadow3{ 	-moz-box-shadow:-5px 5px 5px #999 inset;              /* For Firefox3.6+ */ 	-webkit-box-shadow:-5px 5px 5px #999 inset;           /* For Chrome5+, Safari5+ */ 	box-shadow:-5px 5px 5px #999 inset;                   /* For Latest Opera */ }

内阴影效果(水平偏移为正,垂直偏移为负):

#box-shadow4{ 	-moz-box-shadow:5px -5px 5px #999 inset;              /* For Firefox3.6+ */ 	-webkit-box-shadow:5px -5px 5px #999 inset;           /* For Chrome5+, Safari5+ */ 	box-shadow:5px -5px 5px #999 inset;                   /* For Latest Opera */ }

* 还可以试试把某个偏移值设置为0,这时阴影的效果就只是单边的xA2HTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助