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

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中的背景图像。就我而言，我还对渐变的颜色和位置进行了动画处理。我现在不能保证它是跨浏览器的(对于初学者，请确保父级应用了某个位置，否则它不会是绝对定位的位置容器。