CSS3陰影 box-shadow的使用和技巧總結

時間  2019-11-11
標籤 css3 css 陰影 box shadow 使用 技巧 總結 欄目 CSS 简体版
原文   原文鏈接

text-shadow是給文本添加陰影效果。javascript

box-shadow是給元素塊添加周邊陰影效果。css

隨着HTML5和CSS3的普及，這一特殊效果使用愈來愈廣泛。html

語法：

box-shadow [inset] x-offset y-offset blur-radius spread-radius color
中文對應 【投影方式】 x軸偏移量 y軸偏移量 陰影模糊半徑 陰影擴展半徑 陰影顏色
參數說明 可選，默認外投影，惟一值：inset 正負值，正值：右邊；負值：左邊 正負值，正值：下邊；負值：上邊 可選，只能爲正值，若爲0，陰影不具備模糊效果，值越大陰影邊緣越模糊。 可選，能夠是正負值，正值：整個陰影都延展擴大；負值：則縮小。 可選，若不設定顏色，瀏覽器會默認取色，但各瀏覽器默認取色不一致，特別是在webkit內核下的safari和chrome瀏覽器下表現爲透明色，在Firefox/opera下表現爲黑色，建議不要省略此參數。

瀏覽器的兼容：html5

類型 http://www.runoob.com/images/compatible_edge.gif http://www.runoob.com/images/compatible_firefox.gif http://www.runoob.com/images/compatible_chrome.gif http://www.runoob.com/images/compatible_opera.gif http://www.runoob.com/images/compatible_safari.gif
版本 IE6（×） Firefox 3.0.10（×） Chrome 2.0.x（√） Opera 9.64（×） Safari 4（√）
IE7（×） Firefox 3.5（√）   Opera 10.6（√）  
IE8（×）        
IE9（√）        

參考兼容性： java

兼容方案：jquery

在如下瀏覽器中使用box-shadow屬性時，須要將屬性名稱寫成下列形式：css3

Webkit Chrome -webkit-box-shadow
Safari
Mozilla Firefox -moz-box-shadow

eg：web

.box-shadow{
   /* Firefox4.0-  */
   -moz-box-shadow:投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴展半徑 陰影顏色;  
   
   /* Safariand Google chrome10.0-  */
   -webkit-box-shadow:投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴展半徑 陰影顏色;  
  
   /* Firefox4.0+、 Google chrome 10.0+ 、 Oprea10.5+ and IE9  */
   box-shadow:  投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴展半徑 陰影顏色;  
}

實例：

<!DOCTYPE html>  
<html>  
      
 <head>  
   <meta content="text/html; charset=utf-8" http-equiv="Content-Type">  
   <title>CSS3屬性：box-shadow測試</title>  
   <script type="text/javascript" src="js/jquery.min.js"></script>  
   <script type="text/javascript" src="js/jquery.boxshadow.js"></script>  
   <style type="text/css">  
    .box-shadow-1{  
      -webkit-box-shadow: 3px 3px 3px;  
      -moz-box-shadow: 3px 3px 3px;  
      box-shadow: 3px 3px 3px;  
    }  
    .box-shadow-2{  
      -webkit-box-shadow:0 0 10px #0CC;  
      -moz-box-shadow:0 0 10px #0CC;  
      box-shadow:0 0 10px #0CC;  
    }  
    .box-shadow-3{  
      -webkit-box-shadow:0 0 10px rgba(0, 204, 204, .5);  
      -moz-box-shadow:0 0 10px rgba(0, 204, 204, .5);  
      box-shadow:0 0 10px rgba(0, 204, 204, .5);  
    }  
    .box-shadow-4{  
      -webkit-box-shadow:0 0 10px 15px #0CC;  
      -moz-box-shadow:0 0 10px 15px #0CC;  
      box-shadow:0 0 10px 15px #0CC;  
    }  
    .box-shadow-5{  
      -webkit-box-shadow:inset 0 0 10px #0CC;  
      -moz-box-shadow:inset 0 0 10px #0CC;  
      box-shadow:inset 0 0 10px #0CC;  
    }  
    .box-shadow-6{  
        box-shadow:-10px 0 10px red, /*左邊陰影*/  
        10px 0 10px yellow, /*右邊陰影*/  
        0 -10px 10px blue, /*頂部陰影*/  
        0 10px 10px green; /*底邊陰影*/  
    }  
    .box-shadow-7{  
        box-shadow:0 0 10px 5px black,  
        0 0 10px 20px red;  
    }  
    .box-shadow-8{  
        box-shadow:0 0 10px 20px red,  
        0 0 10px 5px black;  
    }  
    .box-shadow-9{  
        box-shadow: 0 0 0 1px red;  
    }  
      
      
      
    .obj{  
        width:100px;  
        height:100px;  
        margin:50px auto;  
        background:#eee;      
    }  
    .outer{  
        width: 100px;  
        height: 100px;  
        border: 1px solid red;  
    }  
    .inner{  
        width: 60px;  
        height: 60px;  
        background-color: red;  
        -webkit-box-shadow: 50px 50px blue;  
        -moz-box-shadow: 50px 50px blue;  
        box-shadow: 50px 50px blue;  
      }  
   </style>  
  </head>  
      
  <body>  
        <div class="obj box-shadow-1"></div>  
        <div class="outer">  
            <div class="inner"></div>  
        </div>  
        <div class="obj  box-shadow-2" ></div>  
        <div class="obj  box-shadow-3" ></div>  
        <div class="obj  box-shadow-4" ></div>  
        <div class="obj  box-shadow-5" ></div>  
        <div class="obj  box-shadow-6" ></div>  
        <div class="obj  box-shadow-7" ></div>  
        <div class="obj  box-shadow-8" ></div>  
        <div class="obj  box-shadow-9" ></div>  
        <script type="text/javascript">  
            $(document).ready(function(){  
            if($.browser.msie) {  
              $('.obj').boxShadow(-10,-10,5,"#0cc"); //obj元素使用了box-shadow  
            }  
          });  
        </script>  
     
  </body>  
</html>

實例說明：chrome

1. 從.box-shadow-1的效果能夠得出不指定屬性陰影顏色的狀況下，陰影在webkit內核下的safari和chrome瀏覽器下表現爲透明色，在Firefox/Opera下表現爲黑色。 （個人實測是都爲黑色~憨笑）瀏覽器

                                           

 

2. 從內外兩個div塊inner、outer的對比來看，全部支持box-shadow的主流瀏覽器都表現爲：內層陰影撐破外層容器將整個陰影效果呈現出來。W3C標準用圖示的方式對box-shadow的原理和表現進行了解讀：

                                             

從圖中咱們能夠了解到：圓角border-radius，陰影擴展半徑、陰影模糊半徑以及padding是如何影響對象陰影的：非零值的border-radius將會以相同的做用影響陰影的外形，但border-image不會影響對象陰影的任何外形；對象陰影同box模型的層次同樣，外陰影會在對象背景之下，內陰影會在邊框之下背景之上。咱們知道，默認情形背景圖片是在背景顏色之上的。因此整個層級是：邊框>內陰影>背景圖片>背景顏色>外陰影。

 

3. 從. box-shadow-2到. box-shadow-5的效果，咱們能夠了解到box-shadow取值的做用。

. box-shadow-2

box-shadow:

0 0 10px #0CC;

 xy沒有偏移，陰影大小10px，沒有擴展半徑，顏色#0CC即rgba(0, 204,204, 1)，這裏咱們使用的是顏色HEX值；
. box-shadow-3

box-shadow:

0 0 10px rgba(0,204,204,.5);

 在. box-shadow-2效果的基礎上，應用了rgba顏色值，好處是給box-shadow陰影添加了alpha透明效果。
. box-shadow-4

box-shadow:

0 0 10px 15px #0CC;

 在. box-shadow-2效果的基礎上添加了陰影擴展半徑15px。
. box-shadow-5

box-shadow:

inset 0 0 10px #0CC;

 在. box-shadow-2效果的基礎上，將外陰影設爲內陰影。

 

4. . box-shadow-6一個元素使用了多個陰影，多個陰影之間用逗號分隔。 把模糊半徑設置爲0，若是不設置爲0的話那麼其餘三邊也將會有陰影。這點須要注意！

box-shadow:-10px 0 10px red, /*左邊陰影*/
            10px 0 10px yellow, /*右邊陰影*/
            0 -10px 10px blue, /*頂部陰影*/
            0 10px 10px green; /*底邊陰影*/

注意：當給同一個元素使用多個陰影屬性時，須要注意它的順序，最早寫的陰影將顯示在最頂層 。

好比 . box-shadow-7設爲不一樣的模糊值：

.box-shadow-7{

         box-shadow:0 0 10px 5px black,

         0 0 10px 20px red;

}

將能看出層疊的順序效果：

                                                             

若是將兩個陰影效果調一下，改成以下：

.box-shadow-8{

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

         0 0 10px 5px black;

}

將只顯示紅色的陰影效果，由於紅色陰影層在上面，模糊半徑大，將後面的黑色陰影徹底遮擋。

                                                             

得出的結論是：若是前面的陰影模糊值小於後面的陰影模糊值，那麼前面的顯示在後面之上，若是前面陰影的模糊值大於後面的陰影模糊值，那麼前面的陰影將遮住後面的陰影效果。

 

5. 類border邊框效果（只設置陰影擴展半徑和陰影顏色）

.box-shadow-9 {

        box-shadow:0 0 0 1px red；

}

.box-shadow-9呈現的效果，同boder:1px solid red類似，但box-shadow的效果與border效果在對象高度上有區別，正好要比border高度大一個擴展半徑。並且陰影不影響頁面的任何佈局，這一點能夠經過查看firebug下的layout圖得以證明。

 

在IE下模擬 css3中的box-shadow陰影效果

方法一：可使用IE的Shadow濾鏡

基本語法：

filter : progid:DXImage Transform.Miscrosoft.Shadow(color='顏色值',Direction=順時針陰影角度（數值）,Strength=陰影半徑（數值）);

注意：該濾鏡必須配合background屬性一塊兒使用，不然該濾鏡失效。

兼容性：

IE下模擬css3中的box-shadow（陰影）代碼：

.box-shadow{  
   filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696',Direction=135, Strength=5);/*for ie6,7,8*/  
   background-color: #ccc;  
   -moz-box-shadow:2px 2px 5px #969696;/*firefox*/  
   -webkit-box-shadow:2px 2px 5px #969696;/*webkit*/  
   box-shadow:2px 2px 5px #969696;/*opera或ie9*/  
}

 

方法二：有些js和.htc的hack文件能夠實現IE中的陰影效果。

ie-css3.htc是一個可讓IE瀏覽器支持部份CSS3屬性的htc文件，不僅是box-shadow，它還可讓你的IE瀏覽器支持圓角屬性border-radius和文字陰影屬性text-shadow。

它的使用方法是：下載它並放到你的服務器目錄

在你的<head></head>裏面寫入下面的代碼:

.box {
   -moz-border-radius: 15px; /* Firefox */
   -webkit-border-radius: 15px; /* Safari and Chrome */
   border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
   -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
   -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
   box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
   behavior: url(ie-css3.htc);
}

注意：behavior: url(ie-css3.htc) 中的ie-css3.htc地址用絕對路徑或者直接傳到網站的根目錄下面，要否則可能會看不到效果。

這個腳本的缺點是IE只支持一部分的box-shadow值。須要注意：

  • 當你使用了這個htc文件後，你的CSS裏面，只要寫有box-shadow, -moz-box-shadow或-webkit-box-shadow的任何一種，IE就會渲染。
  • 當使用了這個htc文件後，你不能這樣寫box-shadow: 0 0 10px red; 而應該是box-shadow: 0px 0px 10px red; 不然IE中會失效。
  • 不支持RGBA值中的alpha透明度。
  • 不支持inset內陰影。
  • 不支持陰影擴展。
  • 陰影在IE中只會顯示爲黑色，無論你設置成其它什麼顏色。

 

方法三： 使用jQuery的插件jquery.boxshadow.js，插件的下載地址是http://www.hintzmann.dk/testcenter/js/jquery/boxshadow/jquery.boxshadow.js

使用方法很簡單，將該文件和jquery版本庫引入head標籤，插入如下js效果代碼：

<script type="text/javascript">  
 $(document).ready(function(){  
   if($.browser.msie) {  
     $('.obj').boxShadow(-10,-10,5,"#0cc"); //obj元素使用了box-shadow  
   }  
 });  
</script>

注意：js中可使用：obj.style.webkitBoxShadow=值（字符串）;obj.style.MozBoxShadow=值（字符串）;obj.style.boxShadow=值（字符串）;

 

參考博客：

1.http://blog.csdn.net/freshlover/article/details/7610269

2.http://www.jb51.net/css/63281.html

3.http://www.zhangxinxu.com/wordpress/2016/05/css3-filter-drop-shadow-vs-box-shadow/

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程