码迷,mamicode.com
首页 > 其他好文 > 详细

盒子阴影

时间:2015-06-21 01:56:33      阅读:127      评论:0      收藏:0      [点我收藏+]

标签:

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;

}


 



盒子阴影

标签:

原文地址:http://www.cnblogs.com/lsr111/p/4591431.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!