CSS3制作文字半透明倒影效果的两种实现方式

如同你所见的效果图，背景线条仅仅是背景图的一部分，与内容无关。而我们的焦点在于如何为网页元素添加特殊效果。这里以专业技能的标题为例，有两种实现方式引人注目。

首先是利用box-reflect属性（详情可见 属性→边框→box-reflect）。对于此属性，我们可以为.content内的h3元素添加如下样式：

标题的透明度设置为0.7，字体大小为40px，行高为50px，字体为Microsoft yahei。利用-webkit-box-reflect属性创建一种反射效果，从透明渐变到白色，反射距离下方5px。需要注意的是，box-reflect属性目前仅被Chrome和Safari支持（详情可见

我们有了第二种方案，利用transform属性的scaleY方式。这一方案受到神飞博文的启发，以及MDN的一个Demo源代码（

对于同样的h3元素，我们设置其相对定位，并浮动于左侧。然后，利用:before和:after伪元素创建反射效果。其中，:before伪元素显示标题文本，并置于绝对位置，模拟向下反射的效果；而:after伪元素则创建一个遮罩层，背景为从上至下的渐变，与标题文本形成对比。对于.next元素，我们清除左右浮动并设置内边距为60px。

值得注意的是，h3元素的浮动是为了让文字块的宽度动态地适应文字宽度。如果不进行浮动设置，过长的块会导致after遮罩层延长，影响到右侧没有文字的部分。

以上两种方案均可实现引人注目的视觉效果，你可以根据自己的需求和浏览器的兼容情况选择适合的方式为网页添加特色。在浏览网页时，这些特色无疑会为用户带来更好的体验。