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

这是CSS3。甚至还有一个 handy gradient generator 这就不需要猜测了。当然,这在IE8及以下版本中是完全不支持的。

为了完整,如 sluukkonen 前面提到过,IE确实支持CSS中使用过滤器的渐变 filter:progid:DXImageTransform.Microsoft.Gradient

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%
    )
}

希望有帮助:)

有很多方法可以做到这一点 -webkit-gradient -moz-linear-gradient background-image . 这些使用不同的语法,但将标准化,如果梯度规范使它成为css3的最终版本。

/* 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%
);