關於box-shadow和drop-shadow的顯著區別

時間 2019-11-18

標籤關於 box shadow drop 顯著區別简体版

原文原文鏈接

1、box-shadowcss

box-shadow是css3中新增的屬性，用於增長邊框陰影，讓原有的元素變得更多樣性，它名下有四位小弟，老大控制水平方向偏移，老二控制垂直方向偏移，老三控制模糊度，最小的老四控制陰影顏色。html

其中老大老二老三是一組三胞胎，都是像素(px)家族的，而老大老二又是同卵，控制的都是陰影的偏移，老大正值向右偏移，負值向左偏移；老二正值向下偏移，負值向上偏移；老三是異卵，控制引用的模糊度，取值範圍是(0,+∞)，當值爲0的時候表示不模糊，值越大越模糊，當值小於0的時候，陰影消失。老四負責陰影顏色。一家子都在「掙錢養家」，只有老四負責「貌美如花」。css3

2、drop-shadowchrome

drop-shadow也是css3特有的，用於投影，這裏爲何說是投影而不是陰影呢？下面會提到。和box-shadow同樣，它名下的家族徹底複製過來就能夠，成員和表明的意思都同樣。瀏覽器

3、box-shadow和drop-shadow的區別spa

1.兼容性ssr

box-shadow在IE9以上就支持了，基本上各大瀏覽器都支持，而drop-shadow在IE13以上才支持，而谷歌chrome瀏覽器暫時是不支持的，這是在我應用的時候發現的，在懵逼了幾秒以後，決定用火狐FireFox試一下，竟然成功了！由於使用的是mac系統，沒有IE，因此，下面的展現就用FireFox來實現。code

2.寫法htm

box-shadow直接寫就能夠了，簡單粗暴，好比：blog

box-shadow: 5px 5px 10px black;

drop-shadow就不同了，就比如box-shadow是個成年能獨立的人，能一手抓好多東西，而drop-shadow就是個還不能獨立的小孩，出門得有大人領着，同時手小，帶的東西不能一把抓，只能背個小書包把東西裝裏面，也就是用代碼中的括號，好比：

filter：drop-shadow(5px 5px 10px black);

filter是濾鏡的意思，具體的我就不在這講了，有興趣的能夠參考一下菜鳥教程：http://www.runoob.com/cssref/css3-pr-filter.html

3.表現效果

在一樣參數下，box-shadow和drop-shadow表現的效果是不同的，下面用我喜歡的idol，前天剛入伍的TOP給你們演示一下：

box-shadow下：

drop-shadow下：

兩張圖片對比下你會發現，box-shadow的陰影在越接近圖片邊緣的時候比drop-shadow的越黑，並且陰影的寬度也相對drop-shadow的小，從上邊界和左邊界就能看出來，box-shadow的陰影幾乎看不清，而寬度相對較寬的drop-shadow就能看到。

4.盒陰影和投影

這裏就提到上面說的投影了。雖然shadow就是陰影的意思，可是在嚴格意義上講，drop-shadow更應該說是投影，而什麼是盒陰影，什麼是投影，用語言可能表達不清楚，直接上圖給你看就知道了。

先上一串代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .dash1{
                width: 50px;
                height: 50px;
                margin: 0 auto;
                border: dashed 10px #beceeb;
                box-shadow: 5px 5px 10px black;
            }
            .dash2{
                width: 50px;
                height: 50px;
                margin: 50px auto;
                border: dashed 10px #beceeb;
                filter: drop-shadow(5px 5px 10px black);
            }
        </style>
    </head>
    <body>
        <div class="dash1"></div>
        <div class="dash2"></div>
    </body>
</html>

展示的結果就是下面這樣

box-shadow：

drop-shadow：

能夠很明顯的看出區別，爲何會這樣呢？在這裏我用的是div標籤，你們都知道，div標籤是個塊標籤，說白了是個盒模型，指的是一塊區域，box-shadow的屬性只能添加到盒模型外面，所以內部的東西是不會添加上的，就變成上圖的樣子，中間仍是白色部分。而drop-shadow就不同了，他是把選中的全部的非透明區域都作了陰影效果，就至關於一種真正的投影，這裏爲了看得更清楚特地把邊框弄成虛線，因此能看到凡是邊框顯示出來的部分，都有drop-shadow屬性，這也就是爲何我說他是投影更確切。

4、結束語

關於box-shadow和drop-shadow的主要區別就這些，還有一些box-shadow特有的陰影疊加、內陰影效果什麼的我就不說了，有興趣的能夠百度瞭解一下。知識點很小，但也是花了我一上午的時間組織語言，儘可能讓你們一看就懂，若是有什麼不對的歡迎指出！第二篇博客隨筆就此了結！撤~

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。