如何使用渐变背景制作纯CSS div？

Question

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

我不希望它实际使用图像，只是CSS。可能吗？

Answer 1

是CSS3。甚至有一个handy gradient generator可以消除猜测。当然，这在IE8及其下完全不受支持。

---

修改

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

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'函数'作为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%
);