CSS如何让一个<div>的左边更亮？

Question

我有一个div，它是我网站的一半并且左侧有一个类别列表。wrapper本身是灰色的。

我的想法是将它从灰色切换为白色。以下是我希望呈现的图片示例：

有什么解决办法吗？

编辑：

如果有帮助的话，这是我的wrapper css：

#wrapper{
width: 980px;
margin: 0 auto;
background: #f3f3f3;
}

- RnD

Answer 1

如果我理解正确，您正在寻找一种添加渐变的方法。下面是从左到右的渐变CSS，颜色为#FFFFFF到#F3F3F3。

请注意，渐变尚未标准化，许多浏览器都有自己的实现方式。这就是为什么有多个指令（针对Opera的前缀-o-，针对Mozilla的-moz-等）的原因。

#wrapper {
    ...
    background-image: 
        linear-gradient(left , rgb(255,255,255) 35%, rgb(243,243,243) 84%);
    background-image: 
        -o-linear-gradient(left , rgb(255,255,255) 35%, rgb(243,243,243) 84%);
    background-image: 
        -moz-linear-gradient(left , rgb(255,255,255) 35%, rgb(243,243,243) 84%);
    background-image: 
        -webkit-linear-gradient(left , rgb(255,255,255) 35%, rgb(243,243,243) 84%);
    background-image: 
        -ms-linear-gradient(left , rgb(255,255,255) 35%, rgb(243,243,243) 84%);

    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(0.35, rgb(255,255,255)),
        color-stop(0.84, rgb(243,243,243))
    );
}

这里有一个方便的CSS渐变生成器

- Dennis Traub

---

不错，但是CSS渐变在所有重要浏览器中还没有实现。请参阅http://caniuse.com/css-gradients获取有关支持它的浏览器的详细信息。 - Faust

请注意，在不使用CSS3 PIE或类似的东西（可能会导致性能问题）的情况下，该功能在IE8及更早版本中无法正常工作。 - Rasmus Franke

+1 对两个评论都加一，感谢链接和澄清。 - Dennis Traub

Answer 2

您需要的是渐变效果。
尝试使用这个生成器，或者了解更多关于渐变效果的知识。

- chilyashev