CSS盒子陰影像這樣的網站

-1

我有我想如果向下滾動到的底部，模仿本網站http://danielladraper.com/CSS盒子陰影像這樣的網站

-webkit-box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5); 
-moz-box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5); 
box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5);

http://jsfiddle.net/GCwBT/

的影響目前CSS盒子陰影碼該網站並將鼠標懸停在其中一個產品上時，您會看到在其中一個產品上出現了盒子陰影。但是，當我將它應用於我的div時，它們彼此相鄰，只有部分框陰影可見，另一部分似乎被阻擋。

我不知道爲什麼會發生這種情況，儘管我們的div都顯示爲左浮動。

任何人都可以告訴我該網站正在使用哪種js/css組合來實現CSS陰影效果？

感謝

來源

2014-07-19 user2028856

你可能想要這樣的東西http://jsfiddle.net/GCwBT/1/ –

你必須考慮，當用戶將鼠標懸停在箱只出現那個盒子陰影。

在你的jsfiddle中，所有的盒子都有陰影。您必須將其更改爲：

.boxes { 
    width: 200px; 
    height: 200px; 
    float: left; 
    background-color: #ccc; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #fff; 
    position: relative; 
} 

.boxes:hover { 
    -webkit-box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5); 
    -moz-box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5); 
    box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5); 
    z-index: 999; 
}

z-index屬性將框放在前面。它適用於位置：相對（或任何其他人，您需要的位置：相對）

問候。

來源

2014-07-19 12:04:22

哦，是的，我忘了z-index CSS屬性，這就是讓他們的div彈出的原因:) – user2028856

是的，但是僅在懸停時添加z-index非常重要，因爲如果您在.boxes中添加z-index，則沒有任何效果！ –

是的，任何想法他們使用什麼樣的過渡？ – user2028856

您的影子必須被阻擋，因爲您沒有使用z-index，此外還需要在懸停時指定z-index。

.boxes:hover{ -webkit-box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5); -moz-box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5); box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5); z-index:10; }
JSFIDDLE

附：爲了您的情況的位置：相對屬性是需要帶來的Z指數生效

來源

2014-07-19 12:06:02 sunitj

CSS盒子陰影像這樣的網站

回答

相關問題