Question

有没有办法在css / html / javascript中做渐变，哪个适用于所有主流浏览器？（MS IE 5 +，Firefox，Opera，Safari）？

编辑：我想为背景（标题，主面板，侧面板）执行此操作。此外，还希望有垂直线渐变。

编辑：在阅读完回复后，让我们打开Javascript解决方案，因为HTML / CSS本身使得实现更难。

Answer 1

我以前做过这个噱头，使用像：

这样的javascript

var parent = document.getElementByID('foo');
for(var i=0; i< count; i++) {
    var div = document.createElement('div');
    div.style.position = 'absolute';
    div.style.width='100%';
    div.style.height = 1/count+"%";
    div.style.top = i/count+"%";
    div.style.zIndex = -1;
    parent.appendChild(div);
}

如果你的要求只是一个渐变，你真的应该在css中使用渐变图像集作为背景图像。就我而言，我也在为渐变的颜色和位置设置动画。我不能保证现在跨浏览器（对于初学者，确保父母有一些位置应用，否则它不会是绝对定位的位置容器。

Answer 2

我不清楚你正在寻找的实施细节（例如背景，或者只是窗边的边框等）;然而，虽然有点乏味，但它可能会有点乏味。

想到的一个例子是拥有n块级元素，例如div，然后给它们每个小高度（例如几个像素），然后逐渐改变每个后续的背景颜色元件。

Answer 3

我使用colorzilla的渐变CSS代码生成器：http://www.colorzilla.com/gradient-editor/

它有IE的polyfill - 但不知道它有多远。

Answer 4

我认为简短的回答是否定的。

你可以使用css创建看起来像渐变的东西，但是然后像图像背景那样使用它...我认为这会推动它。

编辑（感觉很傻）

我找到了解决方案：http://en.wikipedia.org/wiki/JPEG

Answer 5

现在有很多方法可以创建渐变。 1.您可以为它创建图像。 2.使用CSS3 Gradient，它可以是线性，径向和重复。

linear的语法：

linear-gradient: ([angle | to ] ,[ [color-stop], [color-stop]+);

radial的语法：

linear-gradient: ([angle | to ] ,[ [color-stop], [color-stop]+);

对于IE6到IE 9，我们可以使用过滤器属性，也可以使用CSS3Pie。

以下是一些有用的依据：

Mozilla MDN

CSS3File

只使用html和css和javascript的渐变？

5 个答案: