欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

CSS3 box-shadow内阴影 有大用 有大大用 有大大大用

shiping1 的头像

自己亲自做的例子  横向偏移0像素,纵向偏移0像素,模糊5像素,颜色为32ad9c 

-moz-box-shadow:0px 0px 5px #32ad9c inset;               /* For Firefox3.6+ */
-webkit-box-shadow:0px 0px 5px #32ad9c inset;            /* For Chrome5+, Safari5+ */
box-shadow:0px 0px 5px #32ad9c inset;                    /* For Latest Opera */


浏览器参照基准: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,这时阴影的效果就只是单边的


来自  http://demo.doyoe.com/css3/box-shadow/box-shadow-inset.htm

普通分类: