文本阴影

盒子阴影 和 文本阴影区别;
文本阴影只有三个值，盒子阴影有四个值；

文本阴影是什么。
咱们先看看原图：

咱看一下加上阴影的图：

看到效果了吗？
接下来 我教大家如何实现：

首先，先在HTML里建一个盒子写文字：

<div class="content">
     好好学习,天天向上
</div>

然后在CSS里面写样式：
代码：

.content{
width: 140px;  //div盒子宽度
height: 40px;  //div盒子高度
padding: 20px;  //内边距
margin: 0 auto;  //盒子居中
border: 1px solid pink; // 盒子边线
text-shadow: 0px 0px 1px  red; 
}

来解释一下这个代码：

text-shadow: 这是文本阴影的意思；

第一个0px；(水平方向移动=X轴)；

第二个0px；(水平方向移动=Y轴)；

第三个1px；(模糊度 像素越大 越模糊)；

测试代码：

第一个 0px；就是X轴 水平方向移动，测试第一个0px；

（负值向左移动，正直向右移动）
例图： 代码:

text-shadow: 5px 0px 1px  red;

第二个 0px；就是Y轴 水平方向移动，测试第二个0px；

（负值向上移动，正直向下移动）
例图： 代码:

text-shadow: 0px 5px 1px  red;

第三个 1px；模糊度 ； 测试第三个1px；

（值越大， 越模糊）
例图： 代码:

text-shadow: 0px 0px 5px  red;

还有一个盒子内阴影；

先看无阴影例图：

代码还是一样的后面加一个：inset

  box-shadow: 0px 0px 9px 5px #ccc inset;

在看一下有内阴影例图：