上QQ阅读APP看书，第一时间看更新
4.6 案例实战
本节将以案例形式实战练习CSS3新增的文本属性。
4.6.1 设计黑科技网站首页
本案例将模拟一个黑科技网站的首页，借助text-shadow属性设计阴影效果，通过颜色的搭配，营造一种静谧而又神秘的画面，使用两幅PNG图像对页面效果进行装饰和点缀，最后演示效果如图4.37所示。
图4.37 设计黑科技网站首页
案例主要代码如下：
定义页面背景色为黑色，前景色为灰色。设计右上偏移的阴影，适当进行模糊处理，产生色晕效果，阴影色为深色，营造静谧的主观效果。设计一个遮罩层，让其覆盖在页面上，使其满窗口显示，通过前期设计好的一个探照灯背景来营造神秘效果。通过<div id="spotlight">外罩，为页面覆盖一层桌纸，添加特殊的艺术效果。
4.6.2 设计消息提示框
本节将借助CSS3增强的文本特性和相关动画功能，设计一个纯CSS的消息提示框，效果如图4.38所示。
图4.38 设计消息提示框
【操作步骤】
第1步，设计消息框基本框架样式。
第2步，以内容生成的方式，设计箭头基本样式。
第3步，设计左侧消息提示框的扩展样式。
第4步，模仿第3步，设计右侧消息提示框的扩展样式。
第5步，模仿第3步，设计顶部消息提示框的扩展样式。
第6步，设计底部消息提示框的扩展样式。
第7步，在文档中插入消息提示框，使用类样式进行定义。bubble定义消息框，bubble-left、bubbleright、bubble-bottom和bubble-top定义不同方向显示。代码如下：
