无码无需播放器在线观看,韩国一级毛片手机免费中文在线

技術(shù)頻道 - html技術(shù)

示例分解 CSS box-shadow 與 drop-shadow 的不同

作者:admin 時(shí)間:2024-4-17 21:10:35 瀏覽:

網(wǎng)頁設(shè)計(jì)師在工作中經(jīng)常使用陰影，以前常常用 PNG 圖像來偽造它們，后來隨著CSS技術(shù)的發(fā)展，CSS里的box-shadow和drop-shadow是兩個(gè)常用的陰影屬性，咋一看，兩者幾分相似，但實(shí)際使用時(shí)兩者是不同的，本文將通過示例來分解它們的區(qū)別。

下面是一個(gè)簡(jiǎn)單的三角形制作。

demo download

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后，看到這樣。

demo download

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)行模型制作的事情。

過濾器不綁定到盒模型，這意味著三角形的輪廓被識(shí)別，而其周圍的透明度被忽略，以便預(yù)期的形狀接收陰影。

demo download

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;
}

決定使用哪種方法

答案完全取決于你。上面的三角形的簡(jiǎn)單示例可能看起來filter: drop-shadow()更好，但這并不是對(duì)兩種方法的好處甚至可能性的公平比較。這只是它們?cè)谔囟ㄇ闆r下不同行為的說明。

就像開發(fā)中的大多數(shù)事情一樣，使用哪種方法的答案取決于你。以下是并排比較，以幫助區(qū)分兩者以及何時(shí)最好選擇其中之一。

	Box Shadow	Drop Shadow
規(guī)格	CSS 背景和邊框模塊級(jí)別 3	濾鏡效果模塊級(jí)別 1
瀏覽器支持	很好	好
支持?jǐn)U散半徑	是，作為可選的第四個(gè)值	不
模糊半徑	計(jì)算基于像素長(zhǎng)度	計(jì)算基于SVG濾鏡的stdDeviation屬性
支持嵌入陰影	是	不
表現(xiàn)	非硬件加速	在支持它的瀏覽器中進(jìn)行硬件加速。如果沒有它，這將是一個(gè)沉重的負(fù)擔(dān)。

包起來

box-shadow和filter: drop-shadow()之間的區(qū)別實(shí)際上可以歸結(jié)為 CSS 盒模型。一個(gè)看到它，另一個(gè)忽視它。兩者在瀏覽器支持、性能等方面還存在其他差異，但兩者處理盒模型的方式是關(guān)鍵差異。

另一個(gè)關(guān)鍵區(qū)別，drop-shadow()的半徑分布的計(jì)算方式與box-shadow甚至與text-shadow不同，這意味著可能在box-shadow中指定的擴(kuò)展半徑與drop-shadow的默認(rèn)擴(kuò)展值不是一一對(duì)應(yīng)的，因此在某些情況下兩者并不是彼此相等的替換。

讓我們用其他一些很好的例子來說明這一點(diǎn)。下面是兩個(gè)有關(guān)工具提示和圖標(biāo)的實(shí)際示例。

示例1

demo download

完整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

demo download

完整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>