使用 Primer CSS 中的框阴影

Primer CSS 是 GitHub 开源的 CSS 框架，为构建高质量的 Web 应用提供了先进的工具和组件。在 Primer CSS 中，框阴影是一个非常有用的效果，它可以为容器或元素添加明显的立体感，使页面结构更清晰。本文将介绍如何使用 Primer CSS 中的框阴影。

安装 Primer CSS

在开始使用 Primer CSS 中的框阴影之前，需要先安装这个 CSS 框架。可以通过以下方式获取 Primer CSS：

• 在 GitHub 上下载源代码；
• 通过 NPM 或 Yarn 安装。

安装完成后，将 Primer CSS 的 CSS 文件引入到页面中。

添加框阴影

要对元素添加框阴影，可以使用 Box-shadow 属性。该属性会在元素周围创建一个阴影。其语法如下所示：

box-shadow: h-shadow v-shadow blur spread color inset;

• h-shadow：必须，阴影向右的距离。可指定为负值，表示向左。
• v-shadow：必须，阴影向下的距离。可指定为负值，表示向上。
• blur：可选，阴影的模糊半径。
• spread：可选，阴影的大小。
• color：可选，阴影的颜色。默认为黑色。
• inset：可选，指定阴影在元素内部还是外部。可指定为 inset，表示内部。

在 Primer CSS 中，有一些现成的类可以使用。比如，.shadow-small、.shadow-medium、.shadow-large 等，它们分别对应不同的框阴影大小。可以根据需求选择相应的类。如下面的代码段所示，它添加了一个中等大小的框阴影：

<div class="shadow-medium">Hello World!</div>

自定义框阴影

如果需要自定义框阴影，可以使用 .Box-shadow 类。该类可以与其他元素类一起使用。如下面的代码段所示，它自定义了一个 5px 的黑色有角度的框阴影：

<div class="Box-shadow mx-auto p-5 bg-gray-dark">Hello World!</div>

<style>
  .Box-shadow {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
                0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
</style>

结论

框阴影在设计中是一个很有用的效果，它可以帮助我们为页面元素在视觉上增加一层深度感。使用 Primer CSS 中的框阴影，可以轻松地实现这个效果，并且也可以自定义样式。