反正做一個div以另一個DIV可點擊，就像一個影子？

所以......我創造了這個怪異的解決方案，以一個奇怪的問題：我需要的陰影具有直邊，像清潔側面，而不是箱陰影漸變。反正做一個div以另一個DIV可點擊，就像一個影子？

我使用的：元件之後的梯度附加到需要它的元件的底部（與樣品中，這是註釋）。然後我嘗試了一個陰影大小的插入陰影，這種方式也是一樣的。除了一個小細節之外，這些工作是完美的：我不能像陰影那樣使用它，因爲它覆蓋的元素有時不可點擊。

有些事情我已經排除了已經：

1）通過下面的元素內陷式陰影：它需要被應用到原始的元素，否則也不會功能就像它在事物移動時的陰影一樣。如果我能想出

2）使用的box-shadow負價差或尺寸：這工作，我會用這個除非它看起來並不像設計師怎麼想它。 3）Z-index：雜亂無章，因爲它是一個非常動態的頁面，所以我可以在一些地方使用它，但是在其他地方可以使用它，因爲看到它作爲它的影子，至少應該在視覺上覆蓋所有東西。

因此，回顧一下，我希望它看起來和乾淨的邊緣一模一樣，我需要的是附加到元素而不是周圍的元素，我真的很喜歡它是一個純粹的CSS解決方案，就像僞元素一樣。

任何想法？

來源

2013-01-15 Syren

在我看來，'的位置是：絕對的;'會導致你的煩惱。爲什麼不把h3內部的影子作爲插入陰影？ – wildhaber

因爲codepen樣品中的情況下，將工作，但它不會成爲全局我的目的，因爲它不會作爲一個影子行動。想有作爲下更多的內容，而資產淨值是固定的，所以只要H3卷軸拿出來看，影子也沒有了。 – Syren

據我所見，爲什麼不只是使用圖像？喜歡：背景：紅色網址（img/myimg.png）repeat-x ;.這樣你就可以擁有你的「影子」和背景色，而且它仍然是可點擊的，因爲它是背景。 – Shion

http://codepen.io/anon/pen/cuJqG

HTML：

<nav> 
    <h1>I'm an Example Header</h1> 
</nav> 
<section> 
    <h3>You can't click me because the shadow above is covering me!</h3>

CSS：

nav{ 
    border-bottom:3px solid #000; 
    position:relative; 
} 

h1{ 
    font-family: "Helvetica"; 
    text-transform:uppercase; 
    margin: 20px 10px 10px; 
} 

h3{ 
    font-family: Helvetica, sans-serif; 
    font-weight: 600; 
    padding:10px; 
    margin:0; 
    cursor: pointer; 
    width: 98.75%; 
    color: white; 
    background: #ff0000; 
    box-shadow: inset 0 20px 40px -20px #000; 
}

來源

2013-02-04 09:09:28

反正做一個div以另一個DIV可點擊，就像一個影子？

回答

相關問題