这可能与 CSS 3答案

【问题标题】：Is this possible with CSS 3这可能与 CSS 3
【发布时间】：2011-04-10 22:58:18
【问题描述】：

我有两个 DIV，一个内一个。

<div class="outside">
<div class="inside"></div>
</div>

外部 div 的内边距为 20px。里面的 div 内容很多，可以滚动。滚动时是否可以使用 CSS3 的渐变（alpha？）功能使内部 div 的顶部和底部淡入外部 div？

还是我必须使用透明背景图片来实现这一点？

【问题讨论】：

标签： html css stylesheet

【解决方案1】：

我不这么认为。我认为您可以使用插入框阴影来做到这一点，但我认为这不是您想要的效果：

body, .outside {
    background:#fff;
}
.inside {
    background:#ccf;
    box-shadow:0 -20px 20px 0px #fff inset; -moz-box-shadow:0 -20px 20px 0px #fff inset; -webkit-box-shadow:0 -20px 20px 0px #fff inset;
    height:100px;
    overflow:auto;
    width:200px;
}

【讨论】：

【解决方案2】：

你可以试试这样的

#outside {
    background-image: -webkit-gradient(
      linear, right top, left top, from(rgba(255, 255, 255, 1.0)),
      to(rgba(255, 255, 255, 0))
    );

    background-image: -moz-linear-gradient(
      right center,
      rgba(255, 255, 255, 1.0) 20%, rgba(255, 255, 255, 0) 95%
    );
}

如果您需要多个渐变，您可能必须使用色标，您可以使用此工具来执行此操作。 http://gradients.glrzad.com/

完成选择后，复制代码并将 rgb() 替换为 rgba()，然后再添加 1 个值（在本例中为不透明度）。使用 0 表示完全透明。

祝你好运！

【讨论】：

是的，使用带有 rgba 的背景渐变是解决这个问题的方法。

【解决方案3】：

另一个答案，不使用 CSS3，但我确定这是您正在寻找的效果： http://www.cssplay.co.uk/menu/fade_scroll 使用 PNGs/GIFs 而不是新的 CSS 属性，但它可以在 IE5 之前的浏览器中使用。

【讨论】：

是的。这是我正在寻找的确切效果。是否可以只使用 CSS3？我真的不需要向后兼容。

【解决方案4】：

您可以用其他元素包围内部 div，以便它在正确的方向上呈现正确的渐变。

【讨论】：