【CSS】文字特效(text-shadow)

                                       

HTML代码

<h1>Rabbit</h1>

CSS代码:

body {

    background: #0f93c4;

}

h1 {

    color: #fff;

    font: 5em Brush Script MT;

    text-shadow: 0 1px 0 #ccc,

            0 2px 0 #c9c9c9,

            0 3px 0 #bbb,

            0 4px 0 #b9b9b9,

            0 5px 0 #aaa,

            0 6px 1px rgba(0,0,0,.1),

            0 0 5px rgba(0,0,0,.1),

            0 1px 3px rgba(0,0,0,.3),

            0 3px 5px rgba(0,0,0,.2),

            0 5px 10px rgba(0,0,0,.25),

            0 10px 10px rgba(0,0,0,.2),

            0 20px 20px rgba(0,0,0,.15);

}

<!-- Brush Script MT 是一种字体 -->




                                       

HTML代码:

<h1>Rabbit</h1>

CSS代码:

body {

    background: #fbfbfb;

}

h1 {

    font-size: 5em;

    color: #9e110a;

    text-shadow: 4px 4px 0px #fff,

    10px 10px 0px #cbcbcd;

}





                                       

HTML代码:

<h1>Rabbit</h1>

CSS代码:

body {

    background: #b1ccc3;

}

h1 {

    font: 5em Brush Script MT;

    color: #a5536a;

    text-shadow: -4px -2px 0 #fff;

}

<!-- Brush Script MT 是一种字体 -->




                                       

HTML代码:

<h1>Rabbit</h1>

CSS代码:

body {

    background: #d5d8d1;

}

h1 {

    font-size: 5em;

    color:rgba(67,153,97,.5);

    text-shadow:4px 4px 0 rgba(236,144,79, 0.6);

}




                                       

HTML代码:

<h1>Rabbit</h1>

CSS代码:

body {

    background: #474747;

}

h1 {

    font: bold 5em Brush Script MT ;

    color:#222;

    text-shadow: 0px 2px 3px #666;

}

<!-- Brush Script MT 是一种字体 -->

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 3,216评论 0 11
  • 在正常模式下,一般只能向console 控制台输出简单的文字信息。其实现在chrome可以输出更多。 下面这张是我...
    gz郭小敏阅读 1,356评论 1 1
  • 1、SCSS 是 Sass 的新语法格式,从外形上来判断他和 CSS 长得几乎是一模一样,代码都包裹在一对大括号里...
    夜幕小草阅读 1,774评论 2 10
  • 本书介绍 你是不是对Django的学习感到迷茫?是不是对网上零星的教程感到绝望?是不是苦于没有可以迅速上手的实例而...
    阡陌3536阅读 1,341评论 0 0
  • 等待 如一场春梦 无边的朝霞和花海 在涌动 你还没有出现 我知道你不会来 我还是打扮成你要来的样子 日出 扑面而来...
    公子九月回阅读 160评论 0 0