黑松山资源网 Design By www.paidiu.com
前两天有一个学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实现文字阴影效,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
黑松山资源网 Design By www.paidiu.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
黑松山资源网 Design By www.paidiu.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 《粤语超白金 百听不厌的经典金曲 2CD》[WAV/分轨][1.3GB]
- 群星.1994-全世界精丫华星】【WAV+CUE】
- 杜德伟.1997-知.解2CD【滚石】【WAV+CUE】
- 群星.2022-一不小心喵上你原声大碟【TME影音】【FLAC分轨】
- 《战锤40K星际战士2》卡在正在加入服务器解决方法
- 《勇者斗恶龙怪物仙境3》玩法内容介绍
- 《幸福工厂》无限报错解决方法
- 交错战线原始交易所推荐角色一览
- 战锤40K星际战士2战术职业介绍|战术职业技能效果一览
- 战锤40K星际战士2突击职业介绍|突击职业技能效果一览
- [妙音金曲]群星《悲情咖啡屋》(黑胶)2CD[DTS-WAV]
- 阿兰·达瓦卓玛《A-Lan阿兰唯美歌姬》2CD[DTS-WAV]
- 【小提琴】陈立新《思乡曲》2004[FLAC+CUE]
- 《战地》新作明年初大规模测试!EA已内部测试一年
- 《GTAOL》PC版时隔多年更新反作弊!小助手宣布跑路