---
title: box-shadow 多重影分身之術
tags: CSS
date: 2021/7/30
---

###### tags: `CSS`

###### *date: 2021/7/30*

# box-shadow 多重影分身之術

[TOC]

## box-shadow 的設定

box-shadow: <內部或外部> <x 軸> <y 軸> <blur 模糊值> <spread 大小> <color 顏色>;

| 關鍵字 | 參數 | 範例 |
| :-: | :-- | :-: |
| 內部或外部| 預設是外部，如右圖綠色部分；<br/> `inset`則表示內部，如右圖紅色部分。 |  |
| `x 軸` `y 軸` | `x 軸`：負數往左(綠)，正數往右(紅)；<br/> `y 軸`：負數往上(黃)，正數往下(藍)。 |  |
| blur 模糊值 | 數值越大越模糊(綠)，<br/> 不允許用負數，預設是 0 (紅)|  |
| spread 大小 | 隨著數值擴大(紅)或縮小(綠)，<br/>可以接受負值，預設是 0 |  |
| color 顏色 | 陰影的顏色 | 上面 |

## box-shadow 能夠使用多個的陰影效果

只要使用`,`區隔

element {
    width: 100px;
    height: 100px;
    background-color: #FFFFFF;
    box-shadow: 0px 0px 5px 0px #FF99EC, 
                10px 10px 5px 0px #CC99FF, 
                20px 20px 5px 0px #99C0FF, 
                30px 30px 5px 0px #99FFE2, 
                40px 40px 5px 0px #CFFF99, 
                50px 50px 5px 0px #F9FF99, 
                60px 60px 5px 0px #FFD799, 
                70px 70px 5px 0px #FF9999;
}

*畫面呈現*

==注意==

1. 本體一定會在最上面。
2. 第一個標記會在最上面，依此類推。
3. 陰影的形狀會跟本體一樣

## MDN 有提供 box-shadow 產生器：[Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator)

### 參考資料

[MDN - box-shadow](https://developer.mozilla.org/zh-TW/docs/Web/CSS/box-shadow)

{%hackmd @JohnsonMao/theme-Wood-Fired %}