text-shadow阴影效果

一、定义解释

1、属性

  box-shadow是css3的一个新属性

2、参数

  box-shadow的六个参数

（1）h-shadow：必需、水平阴影的位置、允许负值 

（2）v-shadow：必需、垂直阴影的位置、允许负值

（3）blur：可选、模糊距离【既然是距离肯定就不会是负值，下面的也是一个道理】

（4）color：可选、阴影的颜色

3、方向问题

  h-shadow：正值，显示在左侧

                     负值，显示在右侧

                      0，显示原文字底部

  v-shadow：正值，显示的在下侧

                     负值，显示的在上侧

                      0，显示在原文字底部

即：X轴正直向右，Y轴正直向下，0值在文字底部

 二、实例说明

 

<div class="divTwo">
  <span>Text Shadow(文本阴影)-Css3演示</span>
</div>
.divTwo{
   width: 400px;
   height: 80px;
   background-color: white;
   margin-left: 50px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .divTwo span{
   text-shadow:0px 10px 2px #333333;
 }

 

来源：https://blog.csdn.net/zhumizhumi/article/details/99078192