问题标签 [radial-gradients]

我想重新创建我的网页上显示的背景渐变。与简单的线性渐变不同，它不能很好地重复（作为图像），因此它可以填充可变长度。谁能推荐一种方法来达到预期的效果？

我将以下样式应用于我的div元素：

这具有预期的效果（仅在顶部的内部阴影div）。我想在底部应用相同的效果div。以下行做得很好，但它似乎覆盖了第一行，所以我只能得到一个或另一个。

有人可以告诉我如何为每个元素设置多个径向渐变背景吗？我注意到 webkit 可以很容易地做到这一点，但我正在寻找一个跨浏览器实现/替代方案。

谢谢

我希望在 KineticJS 中产生光源效果。我试图通过在背景中放置各种对象以及填充有径向渐变图案的多个低 alpha Rect 对象层来实现这一点。

效果还是挺满意的，一直在玩弄渐变参数得到各种效果

问题是到目前为止我只设法获得了一个光源，因为在这个之上的第二个 Rect 会妨碍它后面那个的可见性。我敢肯定，我可以执行某种复合操作的跳棋，这将使我获得两个或更多径向梯度的结合，但我自己的运气并不好。有什么建议么？

我正在尝试创建一个具有径向渐变背景的可绘制形状，其半径将适应屏幕尺寸（查看相关文档）。

这是我的代码：

但它似乎不起作用。如果我删除“%p”，它会起作用，但是半径将是静态的，因此不会调整到屏幕尺寸......知道有什么问题吗？

在将Spread 属性设置为Reflect 或Repeat 的情况下使用我的径向渐变算法时，当条带靠得太近时，我会出现疯狂的莫尔条纹。这个是正常的。

我一直试图了解的是如何弄清楚这种情况发生在哪里，或者是否有可能弄清楚这一点。如果我可以确定某种“不同的<->混淆”值，我可以将其用作权重，在给定像素的渐变颜色和所有颜色的加权平均值之间进行混合，从而减轻莫尔条纹。

我知道这是一个相当晦涩的话题，也许这更像是一个数学问题，但是有人有什么想法吗？

作为参考，我的算法类似于这个实现。

这是我的代码现在给出的内容：

我在开罗使用径向渐变，但没有得到预期的结果。我得到的径向渐变比我预期的要模糊得多，而且我似乎无法摆弄色标以获得所需的结果。这是代码：

这是我正在谈论的图像。

有没有办法不重复白圈？

http://dabblet.com/gist/3136266

谢谢你的帮助:)

在我的网页上，我有background: gray，现在我需要添加一个白色阴影圈，如图所示。我的决定之一是添加url:('../img/background.png') no-repeat gray，但我无法连接颜色，因为图像具有垂直渐变。

我认为使用 CSS 3 可以做到这一点，对吗？

使用 RadialGradientBrush 很简单，它允许中心颜色合并到外部颜色中。这可以很好地用作填充矩形或边框内部的画笔。我想实现像使用笔一样应用该画笔并将其应用为 Border.BorderBrush 的效果。所以边界的中心会变暗，远离边界它会消失。

另一种描述它的方式是您在 Windows Vista 或 Windows 7 上的顶级窗口周围看到的阴影。靠近窗口边框的阴影是黑暗的，离窗口越远，阴影消失得越多。好吧，我想以类似的方式绘制边框。

目前我找不到任何方法来实现这一点，使用 RadialGradientBrush 或 LinearGradientBrush。一定有可能吗？有任何想法吗？

在我的页面上，我使用了很多 CSS3 渐变。我想为 IE 和 Opera 提供一些 SVG 后备。

为 CSS3 线性渐变创建 SVG 后备非常简单。我使用以下代码：

这相当于这个css：

现在，当谈到 CSS3 径向渐变时，事情变得有点复杂了。我没有运气为 CSS3 径向渐变创建 SVG 等效项，如下所示：

到目前为止，我已经设法想出了这个：

但它给了我不同的结果。

如何在 CSS3 中产生与原始渐变相同的渐变？

这是两个渐变的演示：http: //jsfiddle.net/QuMnA/