# box-shadow

`box-shadow` 属性为元素添加 shadow 效果，一次可设置多个。`border-radius` 对其有效。

```css
box-shadow: <outset|inset> <offset-x> <offset-y> <blur-radius> <spread-radius> <color>
```

<div align="left"><figure><img src="https://2598460105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGNkDWo1TzHEOBRUxCRfy%2Fuploads%2FLEXe5GqEVKqi4ZZAQtsg%2Fimage.png?alt=media&#x26;token=3233d8e8-f14e-4b78-80d2-c749911bb9a1" alt="" width="375"><figcaption></figcaption></figure></div>

* 可以指定多个 shadows，用 `,` 分隔，它们的 z-order 是最先指定的在上面
* `outset` 在盒子外部，层级是在元素的 background 下方
* `inset` 在盒子内部，层级是在元素的 background 上方、content 下方

<div align="left"><figure><img src="https://2598460105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGNkDWo1TzHEOBRUxCRfy%2Fuploads%2FNlgNzqDzu0gdBnrzAENy%2Fimage.png?alt=media&#x26;token=26edf9b9-c1d8-4cdc-9a4a-fb04118bc43f" alt="" width="375"><figcaption></figcaption></figure></div>

效果举例：

<figure><img src="https://2598460105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGNkDWo1TzHEOBRUxCRfy%2Fuploads%2Ff39vGvW0STEDemOIroFL%2Fimage.png?alt=media&#x26;token=2368b316-4f01-40ac-8019-ca85dd930c55" alt=""><figcaption></figcaption></figure>
