text-shadow文字特效

Html5+CSS3 辰辰 3918℃ 4评论

今天总结一下文字特效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文字特效

喜欢 (29)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(4)个小伙伴在吐槽
  1. 今天总结一下文字特效
    中国演员网2016-08-12 15:47 回复