css 立体字效果text-shadow

1、text-shadow属性介绍

text-shadow(h-shadow,v-shadow,blur,color)
h-shadow:必需,水平阴影的位置,允许负值。
v-shadow:必需,垂直阴影的位置,允许负值。
blur:可选,模糊的距离。
color:可选,阴影的颜色。

2、文字加阴影效果

 		.font-shadow {
            font-size: 50px;
            text-align: center;
            letter-spacing: 10px;
            font-weight: 700;
            color: #e7bc7b;
            text-shadow: 4px 4px 0 #2260b1;
        }
<div class="font-shadow">文字阴影  普通</div>

shadow

3、立体字效果

发现2中的文字加阴影之后,边角很凸显,立体字效果不够明显,在2的基础上做修改就可以实现立体字效果

 		.font-shadow {
            font-size: 50px;
            text-align: center;
            letter-spacing: 10px;
            font-weight: 700;
            color: #e7bc7b;
            text-shadow: 4px 4px 0 #2260b1;
        }
        .font-shadow-3D {
            font-size: 50px;
            text-align: center;
            letter-spacing: 10px;
            font-weight: 700;
            color: #e7bc7b;
            text-shadow: 
            1px 1px 0 #2260b1,
            2px 2px 0 #2260b1,
            3px 3px 0 #2260b1, 
            4px 4px 0 #2260b1;
       
        }
<div class="font-shadow">文字阴影  普通</div>
<div class="font-shadow-3D">文字阴影  立体</div>

shadow立体字

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值