瞧一瞧看一看

text-shadow文字特效

Html5+CSS3 田丰硕 2221℃ 0评论

今天总结一下文字特效text-shadow,如果用好它可以做出各种不一样的效果,下图是我做出的几种效果。

text-shadow

怎么样,看起来很不错吧,下面贴代码。

/* css */
p{
 width:300px;
 margin:0 auto;
 background:#e9e9e9;
 padding:30px 0;
 font-size:30px;
 font-family:Arial, Helvetica, sans-serif;
 font-weight:bold;
 text-align:center;
}
 
 
.a1{
 color:#fff;
 text-shadow:0 0 5px #99FFFF,
 0 0 15px #99FFFF,
 0 0 25px #99FFFF;
}
 
 
.a2{
 text-shadow:0 0 5px #30C;
 color:transparent;
}
 
 
.a3{
 text-shadow:-1px -1px 0 #fff, 1px 1px 0 #000;
}
 
 
.a4{
 color:#fff;
 text-shadow:1px 0px 0 #60F,
 0px 1px 0 #60F,
 -1px 0px 0 #60F,
 0px -1px 0 #60F;
}
 
 
.a5{
 color:#fff;
 text-shadow:0px 1px 0 #000,
 0px 2px 0 #333,
 0px 3px 0 #060606,
 0px 4px 0 #020202,
 0px 5px 0 #252525,
 0px 6px 1px rgba(0,0,0,0.5),
 0px 5px 4px rgba(0,0,0,0.7),
 0px 2px 6px rgba(0,0,0,0.6);
}
 
 <!--html-->
 <div class="main">
 <p class="a1">发光</p>
 <p class="a2">模糊</p>
 <p class="a3">浮雕</p>
 <p class="a4">描边</p>
 <p class="a5">立体</p>
 </div>

转载请注明:田丰硕个人博客 » text-shadow文字特效

喜欢 (0)
发表我的评论
取消评论
表情
(8)个小伙伴在吐槽
  1. 文章不错支持一下
    军事视频2016-10-25 02:43 回复
  2. 不错的博客
    13商城2016-10-12 02:52 回复
  3. 专业的博文 来分享
  4. 非常不错!!
    模特2016-08-18 16:25 回复
  5. 从百度点进来的,支持一下,希望站长您多出一些好文章。
    卢松松博客2016-08-15 18:08 回复
  6. 很实用的!收藏了~
    一键转发2016-07-18 00:56 回复
  7. 很实用的!收藏了~
    卢松松博客2016-07-17 15:18 回复
  8. 非常不错!!!!
    跨境电商平台2016-07-14 11:45 回复