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>

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>