Box Shadow 盒子阴影

控制元素的盒子阴影的实用工具。

Class	Properties

基本用法

添加外部阴影

使用 shadow-sm ， shadow ， shadow-md ， shadow-lg ， shadow-xl 或 shadow-2xl 实用程序向元素应用不同大小的外框阴影。

shadow-md

shadow-lg

shadow-xl

shadow-2xl

<div class="shadow-md ..."></div>
<div class="shadow-lg ..."></div>
<div class="shadow-xl ..."></div>
<div class="shadow-2xl ..."></div>

添加内阴影

使用 shadow-inner 实用程序向元素应用微妙的内部框阴影。这对于表单控件或井非常有用。

shadow-inner

<div class="shadow-inner ..."></div>

去除阴影

使用 shadow-none 来移除元素上现有的框阴影。这通常用于移除在较小断点应用的阴影。

shadow-none

<div class="shadow-none ..."></div>

有条件地应用

悬停、焦点和其他状态

Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如，使用 hover:shadow-lg 只在悬停时应用 shadow-lg 实用程序。

<div class="shadow hover:shadow-lg">
  <!-- ... -->
</div>

有关所有可用状态修饰符的完整列表，请查看悬停、焦点和其他状态文档。

断点和媒体查询

您还可以使用变体修饰符来定位媒体查询，比如响应式断点、暗模式、偏好减少动作等。例如，使用 md:shadow-lg 仅在中等屏幕尺寸及以上应用 shadow-lg 实用程序。

<div class="shadow md:shadow-lg">
  <!-- ... -->
</div>

要了解更多信息，请查看有关响应式设计、深色模式和其他媒体查询修饰符的文档。

使用自定义值

定制您的主题

默认情况下，Tailwind 提供了六个投影阴影实用程序、一个内部阴影实用程序和一个用于移除现有阴影的实用程序。您可以通过编辑您的 tailwind.config.js 文件中的 theme.boxShadow 或 theme.extend.boxShadow 来自定义这些值。

如果提供了 DEFAULT 阴影，则将用于非后缀 shadow 实用程序。任何其他键都将用作后缀，例如键 '2' 将创建相应的 shadow-2 实用程序。

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      boxShadow: {										
        '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',	
      }													
    }
  }
}

有关自定义默认主题的更多信息，请参阅主题自定义文档。

任意值

如果您需要使用一个与主题无关的 box-shadow 值，可以使用方括号来根据任意值动态生成属性。

<div class="shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)]">
  <!-- ... -->
</div>

有关任意值支持的更多信息，请参阅任意值文档。