資訊專欄INFORMATION COLUMN
摘要：區(qū)塊內(nèi)的小區(qū)塊的影子可以反應(yīng)出區(qū)塊內(nèi)所有元素的形狀則是直接對區(qū)塊反應(yīng)出矩形的影子。與不同點沒有內(nèi)部邊框及距離二種特性。
drop-shadow與box-shadow都是陰影效果（光暈效果）的css屬性，二者最大的不同點在于：box-shadow只能制作矩形的陰影，而drop-shadow則可以制作和物件不透明區(qū)域完全相同形狀的陰影。底下是二個css屬性的用法：
.drop-shadow {
-webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7));
filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7))
}
.box-shadow {
box-shadow: 12px 12px 7px rgba(0, 0, 0, 0.7);
}
因為都是陰影效果（光暈效果），所以二者可以設(shè)定的參數(shù)（value）幾乎一樣：以上面的例子來說，參數(shù)的所有數(shù)值從左到右代表了：水平偏移，垂直偏移，陰影模糊距離陰影顏色。
接下來將為您進一步比較drop-shadow與box-shadow
邊框和變形效果
drop-shadow與box-shadow的陰影都可以反應(yīng)出邊框圓角和變形效果。不同的是：drop-shadow反應(yīng)出實際邊框的形狀、實線框有實線的影子、虛線框有虛線的影子；box-shadow則是把邊框和里面的內(nèi)容當成是一個完整的方塊、并制造出整個方塊的影子，而邊框的樣式會被忽略，直接當成是實線框。
.box {
border: 5px solid #262b57;
width: 120px;
height: 120px;
border-radius: 10px;
transform: rotate(15deg);
font-size: 40px;
text-align: center;
line-height: 120px;
}
.dashed {
border-style: dashed;
}
背景與透明度
如果方塊有設(shè)定顏色（不是透明的），drop-shadow與box-shadow的陰影效果看來就會差不多。如果方塊的背景是半透明的呢？我們可以從圖片中發(fā)現(xiàn)，影子周圍的顏色比較深，中間的顏色比較淡，所以可以推論出透明度對drop-shadow會造成影響、對box-shadow則沒有影響。
.bk {
background-color: #ffcc66;
}
.bk-alpha {
background-color: rgba(255, 204, 102, 0.3);
}
圖形邊框（image border）
由示例中我們得知drop-shadow可以反應(yīng)出image-border不規(guī)則的形狀，box-shadow則是將邊框直接視為實心框，忽略邊框圖片的形狀。圖片中的貓頭鷹是透明的PNG圖檔，drop-shadow不僅反應(yīng)出邊框圖片的形狀、也反應(yīng)出邊框內(nèi)貓頭鷹的形狀；box-shadow則是秉持一貫的原則、將邊框和圖片視為一個完整的方塊。
.frame {
width: 286px;
height: 240px;
-moz-border-image: url(frame_green_.png) 25 25 repeat;
-webkit-border-image: url(frame_green_.png) 25 25 repeat;
border-width: 25px;
border-image: url(frame_green_.png) 25 25 repeat;
border-color: #79b218;
border-style: inset;
border-width: 25px;
box-sizing: border-box;
display: block;
margin: 10px;
}
偽元素
偽元素drop-shadow可以反應(yīng)出偽元素的形狀，box-shadow則是會忽略偽元素。
.addition {
width: 100px;
height: 100px;
background-color: #ffcc66;
margin: 10px 60px;
position: relative;
display: inline-block;
}
.addition:before {
width: 50px;
height: 50px;
background-color: #ff8833;
content: "";
display: block;
position: absolute;
left: 0;
top: 50%;
margin-left: -40px;
transform: rotate(45deg);
margin-top: -10px;
}
.addition:after {
width: 60px;
height: 60px;
background-color: #ff8833;
margin: 10px;
content: "";
display: block;
transform: rotate(20deg);
transform: skew(20deg, 20deg);
top: 5px;
right: -40px;
position: absolute;
}
區(qū)塊內(nèi)的小區(qū)塊
drop-shadow的影子可以反應(yīng)出區(qū)塊內(nèi)所有元素的形狀、box-shadow則是直接對區(qū)塊反應(yīng)出矩形的影子。
.square {
width: 50px;
height: 50px;
display: inline-block;
background-color: #ffcc66;
margin: 20px;
}
.circle {
width: 50px;
height: 50px;
display: inline-block;
border-radius: 50%;
background-color: #ff8833;
margin: 20px;
}
drop-shadow
box-shadow
drop-shadow與box-shadow不同點
drop-shadow沒有內(nèi)部邊框（inset shadow）及距離（spread）二種特性。就支持性部份來說，目前IE還不支持drop-shadow屬性；而所有瀏覽器都已經(jīng)普遍支持box-shadow。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114708.html
摘要：本文的題目是陰影技巧與細節(jié)。立體投影好，我們繼續(xù)。下一個主題是立體投影。但是，使用它們生成的陰影通常只能是單色或者同色系的。你這么說，難道還可以生成漸變色的陰影不成額，當然不行。 關(guān)于 CSS 陰影，之前已經(jīng)有寫過一篇，box-shadow 與 filter:drop-shadow 詳解及奇技淫巧，介紹了一些關(guān)于 box-shadow 的用法。 最近一個新的項目，CSS-Inspira...
摘要：本文的題目是陰影技巧與細節(jié)。下一個主題是立體投影。正常而言，我們使用來生成文字陰影，像這樣嗯，挺好的，就是不夠立體。但是，使用它們生成的陰影通常只能是單色或者同色系的。你這么說，難道還可以生成漸變色的陰影不成額，當然不行。關(guān)于 CSS 陰影，之前已經(jīng)有寫過一篇，box-shadow 與 filter:drop-shadow 詳解及奇技淫巧，介紹了一些關(guān)于?box-shadow?的用法。 最近...
摘要：通過模糊來弱化背景和滾動提示使用兩層背景，控制交互式的圖片對比控件范圍輸入控件方式書中有很詳細的解答提醒自己要回顧。 1. 第一章 css編碼技巧 第二章 邊框與背景 半透明邊框 hsla 多重邊框 box-shadow outline 靈活的背景定位 background-position css3該屬性可以指定偏移量，////bac...
摘要：的濾鏡屬性，可以對網(wǎng)頁中的圖片進行類似圖片處理的效果，例如背景的毛玻璃效果老照片黑白照片火焰效果等。理論上說，對比度是指畫面黑白明暗的層次飽和度畫面中色彩的鮮艷程度與層次 css3的濾鏡filter屬性，可以對網(wǎng)頁中的圖片進行類似Photoshop圖片處理的效果，例如背景的毛玻璃效果、老照片（黑白照片）、火焰效果等。 showImg(https://segmentfault.com/i...
閱讀 3783·2021-11-23 09:51
閱讀 4421·2021-11-15 11:37
閱讀 3534·2021-09-02 15:21
閱讀 2756·2021-09-01 10:31
閱讀 887·2021-08-31 14:19
閱讀 865·2021-08-11 11:20
閱讀 3318·2021-07-30 15:30
閱讀 1699·2019-08-30 15:54
