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

7275569-7152ff187d2532e9.jpg
                                       

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 是一种字体 -->




7275569-0a17a0275d17a880.jpg
                                       

HTML代码:

<h1>Rabbit</h1>

CSS代码:

body {

    background: #fbfbfb;

}

h1 {

    font-size: 5em;

    color: #9e110a;

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

    10px 10px 0px #cbcbcd;

}





7275569-d65828aac6469373.jpg
                                       

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 是一种字体 -->




7275569-a740ff4ddac3a1b7.jpg
                                       

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);

}




7275569-4385afc7f99803d0.jpg
                                       

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 是一种字体 -->

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值