码迷,mamicode.com
首页 > 其他好文 > 详细

text-shadow用法

时间:2016-08-31 18:22:52      阅读:765      评论:0      收藏:0      [点我收藏+]

标签:

text-shadow:2px 2px 2px #fff

X轴,Y轴,模糊程度(不可是负值),阴影颜色

 

效果一:

text-shadow: 0 0 20px red;


技术分享

效果二:

text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de;
 
技术分享

效果三:

text-shadow: 0 1px 1px #fff;
 
技术分享

效果四:

text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;
 
技术分享

效果五:

text-shadow: 0 0 5px #f96;
 
技术分享
 

效果六:

text-shadow:0 0 6px #F96, -1px -1px #FFF, 1px -1px #444;
技术分享

效果七:

text-shadow: 1px 1px 0 #E4F1FF;

技术分享

效果八:

text-shadow: 3px 3px 0 red,-3px 3px 0 red,3px -3px 0 red,-3px -3px 0 red;
 
技术分享

效果九:

text-shadow: 1px 1px rgba(197, 223, 248,0.8),2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8);
 
技术分享

效果十:

text-shadow: -1px -1px rgba(197, 223, 248,0.8),-2px -2px rgba(197, 223, 248,0.8),-3px -3px rgba(197, 223, 248,0.8),-4px -4px rgba(197, 223, 248,0.8),-5px -5px rgba(197, 223, 248,0.8);
技术分享

效果十一:

text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee;    /*注意:第一个阴影色和背景色相同;文本前景色和第二个阴影色相同*/
 
技术分享
 

效果十二:

text-shadow: 3px 3px 0 rgba(180,255,0,0.5);
 
技术分享
 
 
 
 
 


text-shadow用法

标签:

原文地址:http://www.cnblogs.com/flyqingfei/p/5826979.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!