如何制作一个带有渐变背景的纯CSS div？

Question

假设 div 的高度为 34px，宽度为 480px。 div 应该如下所示：

我不希望它实际使用图像，而只是使用 CSS。是否可以？

Answer 1

它是用 CSS3 实现的。甚至还有一个方便的渐变生成器从中猜测出来。当然，IE8及以下版本是完全不支持的。

---

编辑

为了完整起见，正如sluukkonen提到的，IE确实支持使用过滤器filter:progid:DXImageTransform.Microsoft.Gradient。

Answer 2

CSS3 是可能的；

示例：（黑色和灰色）

mydiv
{

   background-image:
        -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.15, rgb(189,189,189)),
        color-stop(0.58, rgb(0,0,0)),
        color-stop(0.79, rgb(0,0,0))
    )
    -moz-linear-gradient(
        center bottom,
        rgb(189,189,189) 15%,
        rgb(0,0,0) 58%,
        rgb(0,0,0) 79%
    )
}

但这仅适用于 Mozilla 和 webkit 浏览器，IE8 及以下版本将忽略此。

希望它有帮助:)

Answer 3

有多种方法可以使用 -webkit-gradient 和 -moz-linear-gradient 'functions' 作为 background-image 的值来实现此目的。它们使用不同的语法，但如果渐变规范纳入 CSS 3 的最终版本，它们将被标准化。

/* webkit example */
background-image: -webkit-gradient(
  linear, left top, left bottom, from(rgba(50,50,50,0.8)),
  to(rgba(80,80,80,0.2)), color-stop(.5,#333333)
);

/* mozilla example - FF3.6+ */
background-image: -moz-linear-gradient(
  rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95%
);