> For the complete documentation index, see [llms.txt](https://keenv.gitbook.io/notes/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://keenv.gitbook.io/notes/css/box-shadow.md).

# box-shadow

## 属性

* `inset`：阴影在盒子内部绘制，并在内容之上
* `offset-x`
* `offset-y`
* `blur-radius`
* `spread-radius`
* `color`

## 偏移

偏移是阴影相对于本体的相对位置

```markup
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>阴影右偏移</title> 
<style> 
div
{
    width:300px;
    height:100px;
    background-color:yellow;
    box-shadow: 10px 0px 0px #333;
}
</style>
</head>
<body>

<div></div>

</body>
</html>
```

## 模糊距离：`blur-radius`

使用[**高斯模糊**](/notes/gaussian-blur.md)模糊阴影，阴影是元素的复制（阴影会继承元素的`border-radius`属性）

```markup
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>阴影右偏移，并模糊了</title> 
<style> 
div
{
    width:300px;
    height:100px;
    background-color:yellow;
    box-shadow: 10px 0px 5px #333;
}
</style>
</head>
<body>

<div></div>

</body>
</html>
```

## 阴影大小：`spread-radius`

默认阴影大小等于元素大小，正数阴影变大 负数阴影变小

```markup
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>阴影完全偏移出来</title> 
<style> 
div
{
    width:100px;
    height:100px;
    background-color:yellow;
    box-shadow: 0px 100px 0px -10px #333;
}
</style>
</head>
<body>

<div></div>

</body>
</html>
```


---

# 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://keenv.gitbook.io/notes/css/box-shadow.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.
