css3投影讲解、投影

迷茫了好一段时间，今天开始整理一下自己，同时也整理下新的知识。

CSS3：

从头开始做起：现在在页面中用到最多的是图片/容器投影，文字投影；

接下来就总结一个投影问题：

box-shadow:阴影类型 x轴位移 y轴位移 阴影大小 阴影扩展 阴影颜色

一般这样写   box-shadow:1px 1px 5px #000; 有4个值 分别指 水平方向偏移、垂直方向偏移、阴影羽化、投影颜色；

<div class="box1">
</div>

.box1{width:500px;height:400px;background:#7f0101;box-shadow:10px 10px 5px #500606;box-shadow:<strong>inset</strong> 1px 1px 3px #f56a6a；}

在谷歌上浏览的：

如果是内阴影  box-shadow:<strong>inset</strong>1px 1px 5px #000;

如果想要内发光，那么更简单了，就让背景底色深一些，投影浅一些。

文字也是同理 text-shadow：1px 1px 5px #000;

 

<h2 class="tit">文字投影</h2>

.tit{font-size: 50px;maring-top:20px;text-shadow:5px 5px 4px #000;}

空心文字的效果，想必大家已经想到了吧：

.tit{font-size: 50px;maring-top:20px;text-shadow:0px 1px 0px #000;text-shadow:0 1px #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000;
color:#fff;}

阴影可以重复叠加的 如：box-shadow: -2px 0 5px green,0 -2px 5px blue,0 2px 5px red,2px 0 5px yellow;

ie是最让人闹心啦，所以针对ie9一下，可以通过使用滤镜来兼容。

filter: progid:DXImageTransform.Microsoft.Shadow(color=’颜色值’, Direction=阴影角度（数值）, Strength=阴影半径（数值）);

该滤镜需要配合banckground一起使用，否则便会失效。不过，除了滤镜的方法，还可以使用jquery来实现：

$(document).ready(function(){

            if($.browser.msie) {

            $('.box1').boxShadow(0,0,5,"#888"); //box1元素使用了box-shadow

            $('.box2').boxShadow(-10,-10,5,"#f36"); //box2元素使用了box-shadow{多个元素}

            }

});

补充： 浏览器兼容问题： -khtml-  konqueror

                                -ms-      IE

                               -moz-     FireFox

                               -o-         Opera

                              -webkit-   Safari Chrome

一些css书写规范建议将浏览器私有实现的CSS3属性写在前面标准属性写在后面。如：-webkit-border-radius:30px 10px;  
border-radius:30px 10px;  

如有不足之处，谢谢指出，希望能够互相学习，(*^__^*) 嘻嘻……