CSS也能做PS效果（倒影与描边）

作者：秋了秋发表时间：2015年07月10日

Photoshop可以做各式各样美轮美奂的特效图片，代码能否做到？在网页中用代码把图片描述出来，这就是CSS3的奇妙之处。简称——用代码绘图。

首先我们来看一下效果：

30分钟有效缓解偏头痛 2小时头痛完全消失

欧立停30分钟头痛缓解率38%

欧立停2小时头痛缓解率74%

这部分的html代码为：

<div class="daoying">
<div class="fenfen"><span class="thid">30分钟</span>有效缓解偏头痛     <span class="thid">2小时</span>头痛完全消失</div>
<div class="lef1"><h3>欧立停30分钟头痛缓解率<i>38%</i></h3></div>
<div class="lef2"><h3>欧立停2小时头痛缓解率<i>74%</i></h3></div>
</div>

这主要用到了两个css3属性：倒影和描边（其实就是阴影）。

倒影的css3代码为：

.fenfen {
font-size: 2.3em;
font-weight: bold;
margin: 20px 5px;
color: rgb(31,31,32);
-webkit-box-reflect: below -18px -webkit-gradient(linear, center top, center bottom, from(transparent),color-stop(0.4, transparent), to(rgb(239,246,255)));
}

想要看倒影的其它用法和属性请点击：《使用CSS3制作文字、图片倒影》描边的css3代码为：

.lef1 i, .lef2 i {
color: rgb(219,12,9);
text-shadow: #FFF 2px 0 0,#FFF 0 2px 0,#FFF -2px 0 0,#FFF 0 -2px 0;/**#fff白色描边**/
-webkit-text-shadow: #000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
-moz-text-shadow: #000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
font-size: 1.3em;
margin-left: 8px;
}