如何仅使用CSS淡化div的边缘？

只需一个div（无背景图像/前景图像/层）就可以实现这一点吗？

.褪色{
位置：相对位置；
底部：4em；
高度：4em；
背景：-webkit线性梯度(
rgba（255，255，255，0）0%，
rgba（255、255、255、1）100%
); 
背景图像：-moz线性梯度(
rgba（255，255，255，0）0%，
rgba（255、255、255、1）100%
);
背景图像：-o-线性-梯度(
rgba（255，255，255，0）0%，
rgba（255、255、255、1）100%
);
背景图像：线性梯度(
rgba（255，255，255，0）0%，
rgba（255、255、255、1）100%
);
背景图像：-ms线性梯度(
rgba（255，255，255，0）0%，
rgba（255、255、255、1）100%
);
}

---

下面是一个示例，我现在要做一把小提琴，但我想你可以使用：after伪元素，定位在原始div的顶部，在原始div的底部添加一个白色到透明的渐变。

codepen上的示例：

相关CSS

ol {
  border   : 1px #d8d8d8 dashed;
  position : relative;
}

ol:after {
  content  : "";
  position : absolute;
  z-index  : 1;
  bottom   : 0;
  left     : 0;
  pointer-events   : none;
  background-image : linear-gradient(to bottom, 
                    rgba(255,255,255, 0), 
                    rgba(255,255,255, 1) 90%);
  width    : 100%;
  height   : 4em;
}

---

结果效应

如果浏览器支持

指针事件

属性（除

IEI（个人）以外的所有主要浏览器都会发现使用次要元素作为“重叠”效果很好。我通过定义一个新的
标记来实现这一点。这使得在最后使用
可以很容易地将所需的淡出效果添加到任何想要的元素中


div{
位置：相对位置；
}
褪色{
位置：绝对位置；
底部：0px；
显示：块；
宽度：100%；
高度：50px；
背景图像：线性渐变（至底部，
rgba（255，255，255，0），
rgba（255、255、255、0.9）
100%);
}

文本


文本


文本
使用订单列表而不是div可以吗？这在语义上是正确的。这只是一个例子。在该div中实际上有复杂的项。
ol
或
div
在您的问题上下文中无关紧要。在它可以的范围内，只需让子项il显示：block；有什么关系？我想问的就是是一个元素是否可以在一端没有图层的情况下模糊。谢谢。但是这并不能回答我的问题。你的解决方案需要一秒钟。添加淡入元素以适应淡入。去掉div并将其作为伪元素执行：完美…比我快30秒。+1指针事件的浏览器支持相当弱w、 当然，如果文本应该包含链接、按钮或输入，这个解决方案就不合适了，因为它是一种视觉效果，你可以只在支持该属性的浏览器上显示它。我来这里是想在滚动列表的边缘找到淡入淡出的效果——我想OP也在尝试类似的操作。我用叉子叉了这支笔，包好了它
ol
在一个
div
中，以我想要的效果结束。有没有办法让淡入透明？这是一种淡入白色的淡入，我知道你几乎可以做任何颜色，但最好是我希望不透明度本身进行调整，而不是叠加。实际上，我刚刚意识到这种方法可以防止出现任何问题点击div的底部部分，因为上面会有另一个伪元素。如果没有可以点击的东西，那没关系，但是如果你可能有链接或者其他东西，那么这就不起作用了。既然@FabrizioCalderan刚刚发布了一个相同的想法，我就不必为我的小提琴费心了。这只在内容放在n白色容器。如果下面的颜色是其他颜色，这看起来会很奇怪。当然，可以更改颜色以匹配背景，但如果背景不是纯色，例如图片的渐变，这会成为一个问题。如果要使边缘褪色，这在导航菜单上很有效。此处显示的其他方法可以防止他通过点击链接来阻止用户。当然，你需要两个淡入元素，每边一个。我尝试了很多不同的方法，直到这个方法奏效。谢谢@Aleksander Aziziz！！
ol {
  border   : 1px #d8d8d8 dashed;
  position : relative;
}

ol:after {
  content  : "";
  position : absolute;
  z-index  : 1;
  bottom   : 0;
  left     : 0;
  pointer-events   : none;
  background-image : linear-gradient(to bottom, 
                    rgba(255,255,255, 0), 
                    rgba(255,255,255, 1) 90%);
  width    : 100%;
  height   : 4em;
}