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所示。