如何在 div 边框上创建没有颜色的不透明度渐变？

Question

我有一个小问题，我不确定是否有解决方案。

基本上我想在不依赖颜色的 div 边框上创建不透明度渐变。

让我解释一下。

我有一个“overflow:hidden” div（我们将其称为 MainDiv），其中包含另一个大 div（将称为 SlideDiv），我使用 jquery 在视口中滑动。主 div 有一个“完整的视口”背景复杂图像，它也会移动。所有的东西都创造了一个非常好的视差效果。

正如预期的那样，“SlideDiv”内容消失在视口边界之外。现在这是诀窍。我希望内容不仅消失，而且消失:)

为此，我需要在视口边界上设计一个不透明度渐变。而且由于背景上有一个复杂的图像必须始终可见，所以这个渐变不能与颜色相关。换句话说，我想要一个“不透明度：1（我们看到内容）到不透明度：0（我们没有看到内容）”渐变，而不是一个“不透明度：0（我们看到内容）到白色/ Black/Green/AnyColor opacity:1（内容在不透明颜色后面）”渐变。

这意味着我不能使用 -webkit-gradient 或 -moz-linear-gradient。或者我可以吗？

恐怕出于业务相关的原因，我无法向您展示任何东西。

问题是： - 是否可以使用 CSS2 或 3、jQuery 或插件或任何其他技术（Flash 除外）？ - 如果是这样，如何？ :)

我希望我很清楚，但我不太确定，所以对不起大家 ;)

问候， 吉布

Answer 1

酷..我从你的整个查询中得到的是 i.) 您想对边框应用渐变 ii.) 您还希望边框具有淡入和淡出效果。

如果我正确或非常接近它，您可以使用以下技巧。 i.) 访问此link 以使用 css 获取边框上的渐变。 ii.) 这可能很棘手：您可以为渐变创建一个 svg 形状，并将其以绝对定位放置在具有全宽和全高的主 div 中（还有很多其他方法可以管理元素的高度和宽度.)。由于它将是 SVG 图像或脚本，因此您无需担心结果。

如果我无法解决您的问题。让我知道我会再试一次。

Answer 2

看看this。你可以选择你喜欢的渐变，然后你可以为任何支持渐变的浏览器保存 CSS