青岛银沙滩到金沙滩:初探-css3(box-shadow)
来源:百度文库 编辑:九乡新闻网 时间:2024/04/27 00:04:46
兼容各浏览器的写法:
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3,Direction=135,Color='#cccccc')"; /*ie 8*/
filter:progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=135,strength=3);/*ie 5.5-7*/
-webkit-box-shadow: 2px 2px 3px rgba(78, 68, 60, 0.3);/*safari or chrome*/
-moz-box-shadow: 2px 2px 3px rgba(78, 68, 60, 0.3);/*firefox*/
box-shadow: 2px 2px 3px rgba(78, 68, 60, 0.3);/*opera or ie9*/
一、语法:
box-shadow:color|x|y| indistinct|spread|(inset)
box-shadow: x-offset y-offset spread color;
详细介绍:
a: color指的是阴影颜色值,定义时可以这样定义#000,或者也可以这样定义 (rgba(0,0,0,0.4) /*fox,opera,chrome*/),后者的定义好处是可以控制阴影的透明度
b:x阴影水平偏移值(可取正负值);
c:y阴影垂直偏移值(可取正负值);
d: indistinct 阴影模糊值;
e: spread水平和垂直延伸值(可取正负值);
f: (inset)不定义时 默认为向外阴影,定义inset时内嵌阴影
二、写法:
不过写时要注意(不知道为什么各个浏
览器写法不同,同时达到标准真tmd难):
opera浏览器:.box{box-shadow:rgba(0,0,0,0.4) 5px 5px 10px 5px;}或者.box{box-shadow:#000 5px 5px 10px 5px;}
chrome浏览器: .box{-webkit-box-shadow:rgba(0,0,0,0.4) 5px 5px 10px 5px;}或者.box{-webkit-box-shadow:#000 5px 5px 10px 5px;}
fox浏览器: .box{-moz-box-shadow:rgba(0,0,0,0.4) 5px 5px 10px 5px;}或者.box{-moz-box-shadow:#000 5px 5px 10px 5px;}
ie系列浏览器: -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3,Direction=135,Color='#cccccc')"; /*ie 8*/
filter:progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=135,strength=3);/*ie 5.5-7*/
direction 阴影角度 0°为从下往上 顺时针方向
strength 阴影段长度
为了更好的兼容各个浏览器所以最好都定义
说明:
效果图一:
代码:
还有一些例子好效果如下: