|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
示例分解 CSS box-shadow 與 drop-shadow 的不同
作者:admin 時間:2024-4-17 21:10:35 瀏覽:網(wǎng)頁設(shè)計(jì)師在工作中經(jīng)常使用陰影，以前常常用 PNG 圖像來偽造它們，后來隨著CSS技術(shù)的發(fā)展，CSS里的box-shadow和drop-shadow是兩個常用的陰影屬性，咋一看，兩者幾分相似，但實(shí)際使用時兩者是不同的，本文將通過示例來分解它們的區(qū)別。
下面是一個簡單的三角形制作。
HTML代碼
<div class="caret"></div>
CSS代碼
.caret {
border-left: solid 70px transparent;
border-right: solid 70px transparent;
border-bottom: solid 70px #fff;
height: 0;
width: 0;
}
body {
background: #ddd;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}讓我們用它來分解兩者之間的差異。
box-shadow
增加box-shadow后，看到這樣。
CSS代碼
.caret {
border-left: solid 70px transparent;
border-right: solid 70px transparent;
border-bottom: solid 70px #fff;
box-shadow: 0 0 30px #333;
height: 0;
width: 0;
}
body {
background: #ddd;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}CSS 使用盒模型，其中元素的邊緣被限制為矩形。即使在元素的形狀看起來不是盒子的情況下，盒子仍然存在并且被box-shadow應(yīng)用。
CSS filter drop-shadow （濾鏡投影）
CSS 過濾器非常棒，在元素上添加視覺濾鏡，CSS能做很多我們過去必須在 Photoshop 中進(jìn)行模型制作的事情。
過濾器不綁定到盒模型，這意味著三角形的輪廓被識別，而其周圍的透明度被忽略，以便預(yù)期的形狀接收陰影。
CSS代碼
.caret {
border-left: solid 70px transparent;
border-right: solid 70px transparent;
border-bottom: solid 70px #fff;
filter: drop-shadow(0 0 30px #333);
height: 0;
width: 0;
}
body {
background: #ddd;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}決定使用哪種方法
答案完全取決于你。上面的三角形的簡單示例可能看起來filter: drop-shadow()更好，但這并不是對兩種方法的好處甚至可能性的公平比較。這只是它們在特定情況下不同行為的說明。
就像開發(fā)中的大多數(shù)事情一樣，使用哪種方法的答案取決于你。以下是并排比較，以幫助區(qū)分兩者以及何時最好選擇其中之一。
| Box Shadow | Drop Shadow | |
|---|---|---|
| 規(guī)格 | CSS 背景和邊框模塊級別 3 | 濾鏡效果模塊級別 1 |
| 瀏覽器支持 | 很好 | 好 |
| 支持?jǐn)U散半徑 | 是，作為可選的第四個值 | 不 |
| 模糊半徑 | 計(jì)算基于像素長度 | 計(jì)算基于SVG濾鏡的stdDeviation屬性 |
| 支持嵌入陰影 | 是 | 不 |
| 表現(xiàn) | 非硬件加速 | 在支持它的瀏覽器中進(jìn)行硬件加速。如果沒有它，這將是一個沉重的負(fù)擔(dān)。 |
包起來
box-shadow和filter: drop-shadow()之間的區(qū)別實(shí)際上可以歸結(jié)為 CSS 盒模型。一個看到它，另一個忽視它。兩者在瀏覽器支持、性能等方面還存在其他差異，但兩者處理盒模型的方式是關(guān)鍵差異。
另一個關(guān)鍵區(qū)別，drop-shadow()的半徑分布的計(jì)算方式與box-shadow甚至與text-shadow不同，這意味著可能在box-shadow中指定的擴(kuò)展半徑與drop-shadow的默認(rèn)擴(kuò)展值不是一一對應(yīng)的，因此在某些情況下兩者并不是彼此相等的替換。
讓我們用其他一些很好的例子來說明這一點(diǎn)。下面是兩個有關(guān)工具提示和圖標(biāo)的實(shí)際示例。
示例1
完整HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body{
background: #D5D5D5;
font-family: museo-300;
font-size: 1.5rem;
text-align: center;
}
.tri, .flecha {display: inline-block;margin: 15px;}
.tri {
text-align: left;
width: 250px;
height: 100px;
background: #fff;
position: relative;
padding: 15px;
box-sizing: border-box;
}
.tri:after {
content:'';
height: 0;
width: 0;
border-width: 20px 20px 20px 0;
border-style: solid;
border-color: rgba(255,255,255,0) rgba(255,255,255,1) rgba(255,255,255,0) rgba(255,255,255,0);
position: absolute;
top: 15px;
left: -20px;
}
.flecha {
position: relative;
margin: -20px 110px 0;
width: 0;
height: 0;
border-top: 90px solid transparent;
border-right: 90px solid #FFC000;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
}
.flecha:after {
content: "";
position: absolute;
border: 0 solid transparent;
border-top: 30px solid #FFC000;
border-radius: 200px 0 0 0;
top: -119px;
left: -98px;
width: 120px;
height: 120px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.drop-shadow {
filter: drop-shadow(0px 0px 10px rgba(0,0,0,.5));
}
.box-shadow {box-shadow: 0px 0px 10px rgba(0,0,0,.5)}
</style>
</head>
<body>
<div class="tri drop-shadow">filter: drop-shadow</div>
<div class="tri box-shadow">box-shadow</div>
<div style="clear:both"></div>
<div class="flecha drop-shadow"></div>
<div class="flecha box-shadow"></div>
</body>
</html>
示例2
完整HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body{
background: #ccc;
}
.box{
margin: 40px;
padding: 50px;
background-color: #fff;
position: relative;
font-size: 24px;
}
.cor{
position: absolute;
left:-40px;
width: 0;
height: 0;
overflow: hidden;
border: 20px solid transparent;
border-right-color:#fff;
}
.box-shadow{
box-shadow:5px 5px 10px black;
}
.drop-shadow{
filter:drop-shadow(5px 5px 10px black);
}
</style>
</head>
<body translate="no">
<div class="box box-shadow">
<i class="cor"></i>
box-shadow
</div>
<div class="box drop-shadow">
<i class="cor"></i>
filter:drop-shadow
</div>
</body>
</html>
總結(jié)
本文詳細(xì)分解了 CSS box-shadow 與 drop-shadow 的不同，希望本文對你有所幫助。
相關(guān)文章
標(biāo)簽: box-shadow drop-shadow
- 站長推薦
