使⽤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;
}
css特效文字
.
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实现⽂字阴影效，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。