CSS3 盒阴影淡出效果

Question

如何用CSS3 Box Shadow实现淡出效果？

目前我的实现方式只在竖直方向添加了内部阴影，但我还需要在顶部实现一种淡出效果。

-moz-box-shadow: inset 5px 0 7px -5px #a4a4a4, inset -5px 0 7px -5px #a4a4a4;
-webkit-box-shadow: inset 5px 0 5px -5px #a4a4a4, inset -5px 0 5px -5px #a4a4a4;
box-shadow: inset 5px 0 7px -5px #a4a4a4, inset -5px 0 7px -5px #a4a4a4;

请查看下面的图片，了解期望结果和我目前拥有的内容。

- Eric Bergman

---

使用 :before 将其放置在同一平面上，如果需要，则在 y 轴上旋转 90 度。 - Arpit Srivastava

@Arpit Srivastava，我知道:before伪元素的用途，但我不明白你想告诉我什么，这到底是如何实现淡出效果的？ - Eric Bergman

淡出效果可以通过减少其 opacity 或使用 shadow 的 rgb(color,color,color,opacity) 来实现。 - Arpit Srivastava

@joshnh 这个问题还没有得到解答，所以我没有标记任何答案。你的解决方案似乎很有趣，但它只适用于 WebKit，这不是一个好的解决方案，但感谢你的建议，它可能会帮助到某些人。 - Eric Bergman

Answer 1

我也需要类似的东西:

基本上就是给外部 div 添加一个 drop-shadow，并将内部 div 与外部 div 定位为相对位置，并使用从透明到所需背景颜色的渐变：

http://jsfiddle.net/vBuxt/1/

- Andi

Answer 2

这是我最近为一个项目处理此问题的CodePen示例：

http://codepen.io/byronj/pen/waOxqM

我在主要内容部分添加了一个盒阴影(box-shadow)。然后，在内容底部添加了一个绝对定位(absolute positioned)的div，其中包含一个CSS渐变(CSS gradient)，其一端是内容背景颜色，另一端是透明背景，如下所示：

.container {
   width: 1024px;
   margin: 0 auto;
 }

.container article {
   background-color: #fff;
   margin: -6em auto 10em auto;
   padding-top: 2em;
   width: 100%;
   box-shadow: 0px -2px 20px 2px rgba(0, 0, 0, 0.4);
}

/** GRADIENT **/
.bottom-gradient {
   position: absolute;
   width: 115%;
   height: 60%;
   z-index: 1;
   bottom: -20px;
   background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.59) 10%, white 50%, white 100%);
}

为确保内容不被渐变覆盖，我将“p”元素设置为 position:relative，并将其 z-index 设置为2，如下所示：

p {
  padding: 1em 3em;
  position: relative;
  z-index: 2;
  margin: 1em auto;
  font-size: 1.3em;
  line-height: 1.5em;
}

对于Eric的情况，您需要将渐变放置在包含box-shadow的元素顶部，以逆转此效果。

希望这可以帮助到您。

- Byron

Answer 3

你不能转换包含多个值的CSS3样式 -:

在CSS3中，您可以从一种颜色过渡到另一种颜色，但是您不能在CSS3中在渐变之间进行过渡，因为它会对多个值感到困惑，这在具有多个阴影值的情况下也是一样。

啊，我想我知道你想要实现什么。可能的解决方案是尝试在不使用阴影的情况下复制所需的外观-下面的链接显示了使用边框而不是阴影的可能解决方案，请看看你的想法。 http://css-tricks.com/examples/GradientBorder/

- Jamie Paterson