Html 这在css3中是可能的吗

我有两个div，一个在另一个里面

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

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

---

或者我必须使用透明背景图像来实现这一点吗？

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

我不这么认为。我以为你可以用一个镶嵌框阴影来做，但我不认为这是你想要的效果：

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;
}

---

你可以试试这样的东西

#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%
    );
}

如果需要多个渐变，则可能必须使用颜色停止，并且可以使用此工具来完成此操作

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

---

祝你好运

另一个答案，不使用CSS3，但我相信这就是您想要的效果：

---

使用PNG/GIF而不是新的CSS属性，但它在返回IE5的浏览器中工作。

是的，使用rgba背景渐变是解决此问题的方法。是的。这正是我想要的效果。是否可以只使用CSS3？我真的不需要向后兼容。