3.文字阴影
目前支持的浏览器:Apple Safari 3+, Firefox 3.0.5+, Google Chrome 1+
为文本添加阴影效果，控制阴影左/右和上/下的偏移，还可以设置阴影的颜色。
1 | text-shadow: x y blur color; |
你可以结合透明颜色值来设置文字阴影的明暗:
1 | text-shadow: -2px 2px 10px rgba(0,0,0,.5); |
你还可以让文字有多个阴影，每个阴影属性使用逗号分隔:
1 2 | text-shadow: 0 0 10px rgba(0,255,0,.5), -10px 5px 4px rgba(0,0,255,.45), 15px -4px 3px rgba(255,0,0,.75); |
4.盒阴影
目前支持的浏览器:Apple Safari 4+, Firefox 3+, Google Chrome 1+
为某个和元素添加阴影的CSS3属性声明格式与文本阴影相同:
1 | box-shadow: x y blur color; |
和文本阴影一样，Mozilla 和 Webkit 也有他们自己的盒阴影规则:
1 2 3 | -webkit-box-shadow: 0 0 10px rgb(0,0,0); -moz-box-shadow: 0 0 10px rgb(0,0,0); box-shadow: 0 0 10px rgb(0,0,0); |
你也可以为某个盒元素添加多个阴影，仍然是使用逗号分隔。
1 2 3 4 5 6 | -webkit-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45), 15px -20px 20px rgba(255,0,0,.75); -moz-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45), 15px -20px 20px rgba(255,0,0,.75); box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45), 15px -20px 20px rgba(255,0,0,.75); |
5.多背景图
目前支持的浏览器:Apple Safari 1.3+, Google Chrome 1+
为某个单一元素添加多个背景图的话仅需要为不同的背景图声明之间添加都好来分隔开。当然，你还要为其它浏览器准备一张完整的图片。
