这篇文章主要介绍了使用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实现文字阴影效,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对爱安网网站的支持!

最新资讯
互金协会披露资金存管信息 真假存管一目了然

互金协会披露资金存管

据记者了解,后续互金协会将继续有序组织已通过资金存管
谷歌将向手机商收费 华为OPPO小米恐受影响

谷歌将向手机商收费

为反击欧盟50亿美元罚单,谷歌调整了欧洲手机、平板电脑
中国互金协会披露存管信息 5家银行对接46家P2P平台

中国互金协会披露存管

信融投资、微车融、和丰永讯虽然已经分别在2017年6月
互联网公司时尚穿搭指南

互联网公司时尚穿搭指

着装,是互联网公司区别于其它公司的天然结界。
Uber自成立以来首次发行债券 筹资20亿美元

Uber自成立以来首次发

此次债券发行吸引了充足的投资者兴趣,促使承销商摩根士
NASA命名约20个新星座,包括“哥斯拉”“绿巨人”

NASA命名约20个新星座

综合报道,美国宇航局命名了约20个新星座,以纪念天体观测
最新文章
canvas烟花特效锦集

canvas烟花特效锦集

这篇文章主要介绍了canvas烟花特效锦集,小编觉得挺不错
使用Html5、CSS实现文字阴影效果

使用Html5、CSS实现文

这篇文章主要介绍了使用Html5、CSS实现文字阴影效果的
html5 canvas绘制放射性渐变色效果

html5 canvas绘制放射

这篇文章主要介绍了html5 canvas绘制放射性渐变色效果
canvas基础之图形验证码的示例

canvas基础之图形验证

这篇文章主要介绍了canvas基础之图形验证码的示例的相
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能

利用HTML5+css3+jquer

这篇文章主要介绍了利用HTML5+css3+jquery+weui实现仿
用HTML5实现手机摇一摇的功能的教程

用HTML5实现手机摇一

手机上的摇一摇功能不错.怎么实现的呢