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;  

如有不足之處,謝謝指出,希望能夠互相學習,(*^__^*) 嘻嘻……


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM