使用Html5、CSS实现文字阴影效果

前两天有一个学html5前端小美男问我一个有关笔墨阴影的结果怎么去实现。她和我说笔墨阴影嘛,她也知道text-shadow,.可是却做不出想要的样子,着实css3的新成果是很强盛的,不要把你的头脑过分于范围化,好了,闲话也不多说,咱们就先来看看这个文本阴影.

一.笔墨阴影

text-shadow 笔墨阴影参数: 参数1 : 第1个长度值用来配置工具的阴影程度偏移值。可觉得负值 参数2 ：第2个长度值用来配置工具的阴影垂直偏移值。可觉得负值 参数3 ：假如提供了第3个长度值则用来配置工具的阴影恍惚值。不应承负值参数4 ： 配置工具的阴影的颜色

text-shadow: 10px 10px 50px #000;

二.实例

上图的结果我们奈何来实现呢?  

HTML布局 CSS样式字体样式字体颜色文本阴影 那我们来看一下详细代码:

HTML:  

<div class="text">【精益求精】尚学堂</div>

CSS:  

.text{ font: bold 100px/1.5 '微软雅黑'; color: dodgerblue; /*文本阴影*/ text-shadow: 10px 10px 50px #000; /*text-shadow: 10px 10px 50px #000,-10px -10px 50px #f00;*/ }

此刻我们来看看前端小美男问我的结果该怎么做..

着实很是简朴了,我们来直接上代码~

HTML:

<div class="text">【精益求精】尚学堂</div>

CSS:  

body { background: #000; color: #fff; } .text{ font: bold 100px/1.5 georgia, sans-serif; /*差异颜色的,多个差异值的恍惚巨细*/ text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de; }

发散你的思想,着实css3样式很是风趣,偶然辰每每是一点点改变,就可以实现很炫的结果^.^  

总结

以上所述是小编给各人先容的行使Html5、CSS实现笔墨阴影效，但愿对各人有所辅佐，假如各人有任何疑问请给我留言，小编会实时回覆各人的。在此也很是感激各人对剧本之家网站的支持！

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!