css3 - 不同深浅的背景，不使用图像？

Question

这是 fiddle :http://jsfiddle.net/dzAJp

所有 div 的背景色都是浅蓝色，由 background-color css 样式添加，而不是 background-image。

我想通过将其现有背景颜色与 rgba(0,0,0,0.1) 组合，使第二个 div 更暗一些。关键是只为 div 标记指定一次 lightblue，而不是为任何类指定。

是否可以使用 css3，而不使用图像作为背景？

Answer 1

较暗:

box-shadow: inset 100px 100px rgba(0,0,0,0.1);

打火机:

box-shadow: inset 100px 100px rgba(255,255,255,0.1);

演示: http://jsfiddle.net/dzAJp/3/

---

更新

在上面的示例代码中，我们将尺寸设置为 100 像素以匹配包含对象的尺寸。显然，如果您的元素不都是 100 像素的正方形，这不是很便携。

为了克服这个问题，我们可以设置一个任意高的像素值(不幸的是 box-shadow 不接受百分比):

box-shadow: inset 10000px 10000px rgba(0,0,0,0.1);

最后要注意的是……阅读以下关于浏览器兼容性的 box-shadow 链接:http://css-tricks.com/snippets/css/css-box-shadow/