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;

请参阅下图，查看预期结果以及我目前的情况。

Expected and Current Results

Answer 1

我也需要这样的东西：

基本上它是关于给外部div drop-shadow并将内部div与position:relativ放在外部div中，并使用从透明到所需背景颜色的渐变：

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

Answer 2

以下是我最近处理的一个项目如何解决这个问题的代码示例：

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

我在主要内容部分添加了 box-shadow 。然后，我在内容部分底部添加了 绝对定位 div，其中包含 CSS渐变 一端为背景颜色，另一端为透明背景，如下所示：

.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”元素设置为 位置：相对 ，并使用 z-索引 为2，如下所示：

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

对于Eric的情况，您可以通过将渐变放在包含box-shadow的元素的顶部来反转此效果。

希望这有帮助。

Answer 3

您无法转换包含多个值的CSS3样式 - ：

你可以在CSS3中从一种颜色转换到另一种颜色，但是你不能在CSS3中的渐变之间转换，因为它与多个值混淆，它也会与你的多个阴影值相同。

啊，我想我知道你想要实现的目标。一种解决方案可能是在不使用阴影的情况下尝试再现您所追求的外观 - 下面的链接显示了使用边框而不是阴影的可能解决方案，看看您的想法。 http://css-tricks.com/examples/GradientBorder/

CSS3 Box阴影淡出效果

3 个答案: