反正做一个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可点击，就像一个影子？

回答

相关问题