5

是否可以使用 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;

请参阅下图以查看预期结果和我目前拥有的结果。

预期和当前结果

4

3 回答 3

3

我还需要这样的东西：

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

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

于 2012-12-05T15:50:10.850 回答
1

下面是一个 codepen 示例，说明我是如何为我最近从事的一个项目解决这个问题的：

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

我在我的主要内容部分添加了一个盒子阴影。然后我在内容部分的底部添加了一个绝对定位的 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”元素设置为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 的元素的顶部来反转这种效果。

希望这可以帮助。

于 2015-08-10T22:48:27.943 回答
0

您不能转换包含多个值的 CSS3 样式 -：

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

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

于 2012-09-21T16:22:30.400 回答