> For the complete documentation index, see [llms.txt](https://docs.webmix.cc/html-and-css/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webmix.cc/html-and-css/3.-css/3.25-guan-wu-yin-ying.md).

# 3.27 效果 - 區塊陰影

`box-shadow` 針對區塊來建立陰影。

預設值是 none：

```css
box-shadow: none;
```

語法：

```css
box-shadow: 水平位移 垂直位移 模糊 擴散 顏色 inset;
```

## 範例 1：單一顏色

單一顏色，以下樣式為例，black 陰影，且向右移動 5px ，向下移動 10px。

```css
div.test{
  background-color: red;
  color: white;
  
  box-shadow: 5px 10px black;
}
```

{% embed url="<https://codepen.io/carlos411/pen/BaBdvyX>" %}

## 範例 2：模糊

```css
div.test{
  background-color: red;
  color: white;
  width: 200px;
  
  /* 水平 垂直 模糊 顏色 */
  box-shadow: 5px 5px 5px black;
}
```

例：

{% embed url="<https://codepen.io/carlos411/pen/MWgvZKb>" %}

## 範例 3：擴散

```css
div.test{
  background-color: red;
  color: white;
  width: 200px;
  
  /* 水平 垂直 模糊 擴散 顏色 */
  box-shadow: 5px 5px 0px 5px black;
}
```

{% embed url="<https://codepen.io/carlos411/pen/oNveJXy>" %}

## 範例 4：建立多個陰影

相同語法，只是以逗號做分隔：

```css
div.test{
  background-color: red;
  color: white;
  width: 200px;
  
  box-shadow: 5px 5px black, 10px 10px green;
}
```

{% embed url="<https://codepen.io/carlos411/pen/XWraoda>" %}

## 範例 5：建立內陰影

最後面加上 **`inset`** 即可：

```css
box-shadow: 5px 5px 0px 0px black inset;
```

常搭配 **`:active`** ，滑鼠左鍵按壓下去，不放開的狀態。例：

{% embed url="<https://codepen.io/carlos411/pen/OJLjrNK>" %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.webmix.cc/html-and-css/3.-css/3.25-guan-wu-yin-ying.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.