2

所以......我为一个奇怪的问题创建了这个奇怪的解决方案：我需要带有直边的阴影，比如带有干净边的渐变而不是盒子阴影。

我使用 :after 元素将渐变附加到需要它的元素的底部（在示例中，这已被注释掉）。然后我尝试了一个负尺寸的嵌入阴影，它的工作方式相同。除了一个小细节之外，这些都完美地工作：我不能像使用阴影一样使用它，因为它覆盖的元素有时不可点击。

示例：http ://codepen.io/syren/pen/jlcym

我已经排除了一些事情：

1）在下面的元素上使用 inset-shadows：它需要应用于原始元素，否则当事物移动时它不会像阴影一样起作用。如果我能弄清楚

2) 使用具有负散布或大小的盒子阴影：这可行，我会使用它，但它看起来不像设计师想要的那样。

3）Z-index：它很乱，因为它是一个非常动态的页面，所以我可以在某些地方使用它，但不能在其他地方使用它，因为将其视为阴影，至少在视觉上它应该覆盖所有内容。

所以，回顾一下，我希望它看起来与干净的边缘完全一样，我需要将它附加到元素而不是周围的元素，我真的希望它是一个纯 CSS 解决方案，就像伪元素。

有任何想法吗？

4

1 回答 1

0

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-04T09:09:28.280 回答