Primer CSS 小盒子阴影

Primer CSS 是一个由 GitHub 开发的开源 CSS 框架，旨在帮助开发者构建高质量的 Web 界面。

在 Primer CSS 中，我们可以利用一些内置的 CSS 类来为 HTML 元素添加样式，其中就包括了小盒子阴影。

添加小盒子阴影

要为一个 HTML 元素添加小盒子阴影，我们可以使用 .Box-shadow CSS 类。注意，这个类只适用于拥有 display: block 属性的元素，例如 div、p、ul 和 li 等。

首先，在 HTML 中添加我们要为之添加阴影的元素：

<div class="box">Box with shadow</div>

然后，在 CSS 中添加 .Box-shadow 类：

.box {
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

这个 CSS 样式规则的意思是，给这个元素的周围添加一个宽度为 10 像素、颜色为黑色、透明度为 0.5 的阴影。

阴影参数解释

当然，你可以根据实际情况来调整阴影的宽度、颜色和透明度，只需更改 CSS 样式规则中的相应数值即可。

阴影参数的解释如下：

box-shadow: x-offset y-offset blur color;
/* 
x-offset: 阴影水平偏移量
y-offset: 阴影垂直偏移量
blur: 阴影的模糊半径
color: 阴影颜色
*/

结语

使用 Primer CSS 的 .Box-shadow 类可以为 HTML 元素添加小盒子阴影。这种效果可以为页面带来立体感，使 UI 界面更加生动而富有层次感。

代码片段：

```html
<div class="box">Box with shadow</div>

.box {
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}