1. 技巧预览
设置透明度；圆角；投影；2. 实战出技术
2.1 设置透明度
效果预览
图2.1 不透明效果预览
图2.2 不透明度为50%效果预览
代码展示
<!DOCTYPE html><html><head><title>实战</title><meta charset="utf-8"><style type="text/css">.box {width: 150px;height: 150px;line-height: 150px;text-align: center;/* @Key 透明度 R G B Alpha（不透明度为50%） */background-color: rgba(64, 224, 208, 0.5);}</style></head><body><div class="box"></div></body></html>
知识讲解
RGBa是一种同时设置颜色和不透明度的机制。RGB代表红色、绿色和蓝色，a代表alpha透明度。background-color: rgba(64, 224, 208, 0.5);中前三个整数表示颜色的值，最后一个数字是十进制的不透明度值，所以0.5表示这个背景的不透明度是50%，换句话说，透明度是50%。值为1表示100%不透明，值为0表示完全透明。效果如图2.2所示。
2.2 圆角
效果预览
图2.3 圆角效果预览
代码展示
<!DOCTYPE html><html><head><title>实战</title><meta charset="utf-8"><style type="text/css">.box {width: 150px;height: 150px;line-height: 150px;text-align: center;/* @Key 透明度 R G B Alpha（不透明度为50%） */background-color: rgba(64, 224, 208, 0.5);/* @Key 圆角矩形 */-moz-border-radius: 1em;-webkit-border-radius: 1em;border-radius: 1em;}</style></head><body><div class="box"></div></body></html>
知识讲解
其实是使用的CSS3新属性来设置边框圆角的半径，不同浏览器内核使用不同前缀：Mozilla使用-moz前缀，Safari使用-webkit前缀。此外IE、Opera和所有主流浏览器都有相似的前缀。可以使用这些前缀访问每种浏览器特有的特性，可能需要在厂商的开发人员站点上查阅可用的特性。
2.3 投影
效果预览
图2.4 投影效果预览
代码展示
<!DOCTYPE html><html><head><title>实战</title><meta charset="utf-8"><style type="text/css">.box {width: 150px;height: 150px;line-height: 150px;text-align: center;/* @Key 透明度 R G B Alpha（不透明度为50%） */background-color: rgba(64, 224, 208, 0.5);/* @Key 圆角矩形 */-moz-border-radius: 1em;-webkit-border-radius: 1em;border-radius: 1em;/* @Key 投影 投影偏移3px，宽6px，颜色#666 */-webkit-box-shadow: 3px 3px 6px #666;-moz-box-shadow: 3px 3px 6px #666;box-shadow: 3px 3px 6px #666;}</style></head><body><div class="box"></div></body></html>
知识讲解
CSS3支持使用box-shadow属性设置投影。这个属性需要4个值：垂直和水平偏移、投影的宽带（也就是模糊程度）和颜色。box-shadow: 3px 3px 6px #666;表示投影偏移3像素，宽带设置为6像素，颜色为中等灰色，效果如图2.4所示。
