如何制作带有渐变背景的纯 CSS div？答案

【问题标题】：How to make a pure CSS div with a gradient background?如何制作带有渐变背景的纯 CSS div？
【发布时间】：2010-08-17 07:09:29
【问题描述】：

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

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

【问题讨论】：

标签： css html gradient

【解决方案1】：

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

编辑

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

【讨论】：

请注意，IE 确实 support gradients。显然不是 CSS3，但它可以工作。

【解决方案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及以下将忽略这一点。

希望对你有帮助:)

【讨论】：

注意：分别应用于 background-image 属性。
谢谢，忘记补充了:)

【解决方案3】：

有一些方法可以使用-webkit-gradient 和-moz-linear-gradient 'functions' 作为background-image 的值。这些使用不同的语法，但如果渐变规范进入 CSS 3 的最终版本，它们将被标准化。

/* webkit 示例 */
背景图像：-webkit-渐变（
  线性，左上，左下，从（rgba（50,50,50,0.8）），
  to(rgba(80,80,80,0.2)), color-stop(.5,#333333)
);

/* Mozilla 示例 - FF3.6+ */
背景图像：-moz-线性渐变（
  rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95%
);

【讨论】：