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

Question

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

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

让我解释一下。

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

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

为此，我需要在视口边框上设计不透明度渐变。由于背景上有一个必须始终可见的复杂图像，因此该渐变不能与颜色相关。换句话说，我想要一个“不透明度：1（我们看到内容）到不透明度：0（我们看不到内容）”渐变，而不是“不透明度：0（我们看到内容）到白色/黑色/绿色/任何颜色不透明度：1（内容位于不透明颜色后面）”渐变。

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

由于业务相关原因，恐怕我无法向您展示任何内容。

问题是： - 是否可以使用 CSS2 或 3、jQuery 或插件或任何其他技术（不包括 flash）？ - 如果是这样，怎么办？ :)

我希望我说得清楚，但我不太确定，抱歉，大家好；）

问候， 吉布

Answer 1

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

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

如果我没有解决你的问题。让我知道我会再试一次。

Answer 2

看看这个。您可以选择您喜欢的渐变，并可以从中保存任何支持渐变的浏览器的 CSS