CSS3-盒子阴影:box-shadow

box-shadow:none|shadow

它的值包括 6 个参数:阴影类型,X轴位移,Y轴位移,阴影大小,阴影扩展和阴影颜色。此 6 个参数可以有选择地省略。

浏览器兼容性

Webkit支持:-webkit-box-shadow

Mozilla支持:-moz-box-shadow

IE9支持:box-shadow

IE8及以前:不支持

实用实例

简单效果:

img{

height:300px;

-moz-box-shadow:5px 5px;

-webkit-box-shadow:5px 5px;

box-shadow:5px 5px;

}

虚阴影效果:

img{

height:300px;

-moz-box-shadow:2px 2px 10px #06c;

-webkit-box-shadow:2px 2px 10px #06c;

box-shadow:2px 2px 10px #06c;

}

渐变阴影效果:

img{

height:300px;

-moz-box-shadow:0 0 10px #06c;

-webkit-box-shadow:0 0 10px #06c;

box-shadow:0 0 10px #06c;

}

带光晕效果

img{

height:300px;

-moz-box-shadow:0 0 10px 10px #06c;

-webkit-box-shadow:0 0 10px 10px #06c;

box-shadow:0 0 10px 10px #06c;

}

内阴影效果

img{

height:300px;

-moz-box-shadow:inset 5px 5px 10px #06c;

-webkit-box-shadow: inset 5px 5px 10px #06c;

box-shadow: inset 5px 5px 10px #06c;

}

彩色阴影

img{

height:300px;

-moz-box-shadow:0 0 10px red,

2px 2px 10px 10px yellow,

4px 4px 12px 12px green;

-webkit-box-shadow:0 0 10px red,

2px 2px 10px 10px yellow,

4px 4px 12px 12px green;

box-shadow:0 0 10px red,

2px 2px 10px 10px yellow,

4px 4px 12px 12px green;

}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容