Tailwind CSS 盒阴影

盒阴影

用于控制元素的盒状阴影的功能类。

外阴影

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

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

内阴影

使用 ​shadow-inner​ 功能类为元素应用一个微妙的插入框阴影。这对表单控件或井等元素很有用。

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

无阴影

使用 ​shadow-none​ 从元素中移除现有的盒状阴影。这最常见的是用来移除应用在较小断点上的阴影。

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

响应式

要在特定的断点处控制元素的阴影，请在任何现有的阴影功能中添加 ​{screen}:​ 前缀。例如，使用 ​md:shadow-lg​ 来应用 ​shadow-lg​ 功能在中等大小的屏幕和更大的屏幕上。

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

关于 Tailwind 的响应式设计功能的更多信息，请查看响应式设计文档。

自定义

盒子阴影

默认情况下，Tailwind 提供了六个下拉阴影工具，一个内部阴影工具，以及一个用于移除现有阴影的工具。你可以通过编辑你的 Tailwind 配置中的 ​theme.boxShadow​ 部分来改变、增加或删除这些。

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

  // tailwind.config.js
  module.exports = {
    theme: {
      boxShadow: {
        sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
        DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
        md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
        lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
        xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
        '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
       '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
        inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
        none: 'none',
      }
    }
  }

变体

默认情况下， 针对 box shadow 功能类，只生成 responsive, group-hover, focus-within, hover and focus 变体。

您可以通过修改您的 ​tailwind.config.js​ 文件中的 ​variants ​部分中的 ​boxShadow ​属性来控制为 box shadow 功能生成哪些变体。

例如，这个配置也将生成 active 变体:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
       boxShadow: ['active'],
      }
    }
  }

禁用

如果您不打算在您的项目中使用 box shadow 功能，您可以通过在配置文件的 ​corePlugins ​部分将 ​boxShadow ​属性设置为 ​false ​来完全禁用它们：

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
     boxShadow: false,
    }
  }