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 */
}
-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 */
}
-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 */
}
-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 */
}
-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,这时阴影的效果就只是单边的
来源于:http://demo.doyoe.com/css3/box-shadow/box-shadow-inset.htm