box-shadow（转）没发现好的暂时转他

最新推荐文章于 2025-02-14 14:37:35 发布

转载最新推荐文章于 2025-02-14 14:37:35 发布 · 210 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/bolobolomy/archive/2012/11/16/2773617.html

本文详细介绍了如何使用CSS3实现不同偏移值下的内阴影效果，并提供了针对Firefox、Chrome、Safari、Opera及IE等浏览器的具体代码示例。

CSS3 box-shadow:

浏览器参照基准：Firefox4 and Later, Chrome5 and Later, Safari5 and Later, Opera10.53 and Later, IE9.0 and Later

内阴影效果（偏移值都为正）：

#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，这时阴影的效果就只是单边的

转载于:https://www.cnblogs.com/bolobolomy/archive/2012/11/16/2773617.html