Tailwind CSS on GitHub

盒阴影

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

Default class reference

Class
Properties
*--tw-shadow: 0 0 #0000;
shadow-sm--tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow--tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow-md--tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow-lg--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow-xl--tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow-2xl--tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow-inner--tw-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow-none--tw-shadow: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

Outer shadow(外阴影)

使用 .shadow-sm, .shadow, .shadow-md, .shadow-lg, .shadow-xl, 或 .shadow-2xl 等功能类来应用不同大小的外框阴影到一个元素上。

.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>

Inner shadow (内阴影)

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

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

No shadow(无阴影)

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

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

响应式

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

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

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

自定义

Box Shadows

默认情况下,Tailwind 提供了三个 drop shadow 功能,一个内部阴影功能,和一个删除现有阴影的功能。您可以通过编辑您的 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)',
-       outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
+       focus: '0 0 0 3px rgba(66, 153, 225, 0.5)',
        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,
    }
  }