当前位置:秋叶网络博客 前端编程 ◊ CSS也能做PS效果(倒影与描边)

CSS也能做PS效果(倒影与描边)

作者:秋叶 发表时间:2015年7月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;
}
目录: 前端编程 | 标签: , | 14255次阅读