box-shadow

box-shadow是CSS3中的一个属性，用于为元素添加阴影效果。它可以通过设置水平偏移量、垂直偏移量、模糊半径、扩散半径和颜色来定义阴影的样式。\[1\]

例如，可以使用以下代码为一个元素添加一个简单的阴影效果：
.container {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

这个代码将在元素的右下方创建一个2像素的水平偏移量和垂直偏移量，模糊半径为4像素的阴影，并且颜色为半透明的黑色。

另外，box-shadow属性还可以使用inset关键字来创建内部阴影效果。例如：
.container {
box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.5);
}

这个代码将在元素内部创建一个2像素的水平偏移量和垂直偏移量，模糊半径为4像素的内部阴影。

此外，还可以使用spread参数来控制阴影的大小。正数值会使阴影扩大，负数值会使阴影缩小。例如：
.container {
box-shadow: 2px 2px 0 10px rgba(0, 0, 0, 0.5);
}

这个代码将在元素的右下方创建一个2像素的水平偏移量和垂直偏移量，模糊半径为0的阴影，并且使用10像素的扩散半径。

总之，box-shadow属性可以通过设置水平偏移量、垂直偏移量、模糊半径、扩散半径和颜色来定义元素的阴影效果。可以根据具体需求来调整这些参数以达到所需的效果。\[1\]\[2\]\[3\]
#### 引用[.reference_title]
- *1* [分享CSS3里box-shadow属性的使用方法，包括内阴影box-shadow：inset](https://blog.csdn.net/ly000666/article/details/120661371)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [box-shadow详解](https://blog.csdn.net/qq_40864647/article/details/129090641)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]