css-tutorial/chapters/016 阴影.md

# 阴影

*css提供了多种方式可以为元素或者文字添加不同的阴影效果。通过本节内容，你将学会如何使用这些方式，知道它们各自的用途。*

## 一.`box-shadow`

`box-shadow`是比较常用的一个属性，可以为元素边框周围添加一层阴影效果。
```css
.ele {
    box-shadow: 5px 5px 20px 5px #000;
}
```

`box-shadow`接受的值，按照从左至右的顺序依次表示：
1. x偏移：水平偏移，正值表示向右偏移，负值表示向左偏移。
2. y偏移：竖直偏移，正值表示向下偏移，负值表示向上偏移。
3. 模糊半径：表示阴影的模糊范围。
4. 扩散半径（可选）：正值会增加阴影的半径，负值会减少阴影的半径，设置为0时，阴影半径为模糊半径。
5. 颜色：设置阴影的颜色，如果没有显示设置该值，那么会使用text的颜色作为阴影颜色。

还可以在`box-shadow`值最开始处添加`inset`关键字，使阴影呈现在边框内部。
<iframe height="300" style="width: 100%;" scrolling="no" title="015 Box Shadow_01" src="https://codepen.io/AhCola/embed/OJmKZLg?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/OJmKZLg">
  015 Box Shadow_01</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

可以添加多个阴影，形成叠加效果。
```css
.my-element {
  box-shadow: 5px 5px 20px 5px darkslateblue, -5px -5px 20px 5px dodgerblue,
    inset 0px 0px 10px 2px darkslategray, inset 0px 0px 20px 10px steelblue;
}
```
<iframe height="300" style="width: 100%;" scrolling="no" title="015 Box Shadow_02" src="https://codepen.io/AhCola/embed/MWmNGYz?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/MWmNGYz">
  015 Box Shadow_02</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 二.`text-shadow`

使用`text-shadow`可以给文字添加阴影效果。与`box-shadow`类似，但是作用对象是文字。
```css
.ele {
    text-shadow: 3px 3px 3px hotpink;
}
```
`text-shadow`接受的值与`box-shadow`一样。唯一不同的是，`text-shadow`不能设置扩散半径和`inset`关键字。

<iframe height="300" style="width: 100%;" scrolling="no" title="015 Box Shadow_03" src="https://codepen.io/AhCola/embed/rNmXveb?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/rNmXveb">
  015 Box Shadow_03</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

和`box-shadow`一样，也可以给文字添加多个阴影。
```css
.ele {
    text-shadow: 1px 1px 0px white,2px 2px 0px firebrick;
}
```
<iframe height="300" style="width: 100%;" scrolling="no" title="015 Box Shadow_04" src="https://codepen.io/AhCola/embed/wvdVjzp?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/wvdVjzp">
  015 Box Shadow_04</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 三.`drop-shadow`

`drop-shadow`是一个css函数，而不是属性。用于给图片中的内容添加阴影的，对的你没有看错的确是图片里的内容。实现过程实际上是分析图片中的内容，然后在图片原有的位置上添加一个模糊的偏移的图片，达到阴影的效果。与[filter](http://pengfeixc.com/blogs/css/css-filter)属性配合使用。
```css
.ele {
    filter: drop-shadow(0px 0px 10px rgba(0 0 0 / 30%))
}
```
`drop-shadow`参数与`box-shadow`一样，但是不能设置扩散半径和`inset`关键字，你也可以为图片添加多个阴影。
```css
.ele {
    filter: drop-shadow(0px 0px 10px hotpink) drop-shadow(10px 10px 20px rgba(0 0 0 / 30%))
}
```
<iframe height="300" style="width: 100%;" scrolling="no" title="015 Box Shadow_05" src="https://codepen.io/AhCola/embed/ExmqLwa?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/ExmqLwa">
  015 Box Shadow_05</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>


(完)