Box-shadow：插入屬性css

-2

我在Codepen上看到了這段代碼。它是一個更大項目的一部分。我的問題是爲什麼有兩套box-shadow的「插入」屬性？他們兩人是否有相同的功能？我可以刪除其中的一個嗎？先謝謝您的幫助！！Box-shadow：插入屬性css

鏈接到原項目：http://codepen.io/tholman/pen/BLeJs

.trapdoor { 

position: absolute; 
top: 50%; 
left: 50%; 
margin-left: -100px; 
margin-top: -25px; 
width: 200px; 
height: 50px; 
background: rgba(0, 0, 0, 0.3); 
transition: background 400ms ease-in-out; 
box-shadow: inset -7px 0px 12px -8px rgba(0, 0, 0, 0.3), inset 7px 0px 12px -8px rgba(0, 0, 0, 0.3); 
}

來源

2015-12-08 Jess

刪除一個，看到了差距;恢復，然後刪除其他，看看有什麼不同。當然你*可以*刪除一個，但首先爲什麼不看你是否應該*或如果你*想要*？究竟，您希望我們爲您解答的問題是什麼？ –

看起來像元素左側有一個插入陰影，右側有一個插入陰影。 –

有申報覆蓋件的兩側的兩個inset風格，提供所需的正確的對比度，給人的3D /透視效果。
聲明它們並平等地抵消它們是我們在物體上自然觀察到的，儘管觀察結果並不總是一致的。
可以刪除一個，如果你喜歡，但是當你做你的元素現在有僅在其側面的一個複雜的陰影樣式，你會發現...如果需要，那麼你會很高興。
「做二者具有相同的功能」當然
，它們是相同的CSS屬性聲明;唯一的區別是插入陰影聲明後面的x軸偏移值。在這種情況下，一個是剩下-7個像素，而另一個是7個像素。

來源

2015-12-08 06:41:25 albert

答案：基本上是：「該box-shadow屬性描述一個或多個陰影效果作爲一個逗號分隔的列表」在你的代碼示例中，第一個插圖是右側，第二個插入是左側，因爲不透明度設置爲0.3，所以很難看到陰影。我已經包含一個示例代碼，顯示相同的插圖，但是顯示爲藍色和紅色。

本網站對box-shadow樣式一些有用的信息：

下面是一個CodePen顯示類的變化： http://codepen.io/ctwoodwa/pen/PZwOwQ

.trapdoor { 
 
position: absolute; 
 
top: 50%; 
 
left: 25%; 
 
margin-left: -100px; 
 
margin-top: -25px; 
 
width: 200px; 
 
height: 50px; 
 
background: rgba(0, 0, 0, 0.3); 
 
transition: background 400ms ease-in-out; 
 
box-shadow: inset -7px 0px 12px -8px rgba(0, 0, 255, 1), inset 7px 0px 12px -8px rgba(255, 0, 0, 1); 
 
} 
 
.trapdoor2 { 
 
position: absolute; 
 
top: 50%; 
 
left: 50%; 
 
margin-left: -100px; 
 
margin-top: -25px; 
 
width: 200px; 
 
height: 50px; 
 
background: rgba(0, 0, 0, 0.3); 
 
transition: background 400ms ease-in-out; 
 
box-shadow: inset -7px 0px 12px -8px rgba(255, 0, 0, 1); 
 
}

<div class="trapdoor">First inset is blue</div> 
 
<div class="trapdoor2">Second is red</div>

來源

2015-12-08 06:42:14

Box-shadow：插入屬性css

回答

相關問題