Tailwind CSS 盒陰影

盒陰影

用于控制元素的盒狀陰影的功能類。

外陰影

使用 ?shadow-sm?、?shadow?、?shadow-md?、?shadow-lg?、?shadow-xl? 或 ?shadow-2xl? 實用程序?qū)⒉煌笮〉耐饪蜿幱皯?yīng)用于元素。

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

內(nèi)陰影

使用 ?shadow-inner? 功能類為元素應(yīng)用一個微妙的插入框陰影。這對表單控件或井等元素很有用。

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

無陰影

使用 ?shadow-none? 從元素中移除現(xiàn)有的盒狀陰影。這最常見的是用來移除應(yīng)用在較小斷點上的陰影。

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

響應(yīng)式

要在特定的斷點處控制元素的陰影，請在任何現(xiàn)有的陰影功能中添加 ?{screen}:? 前綴。例如，使用 ?md:shadow-lg? 來應(yīng)用 ?shadow-lg? 功能在中等大小的屏幕和更大的屏幕上。

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

關(guān)于 Tailwind 的響應(yīng)式設(shè)計功能的更多信息，請查看響應(yīng)式設(shè)計文檔。

自定義

盒子陰影

默認情況下，Tailwind 提供了六個下拉陰影工具，一個內(nèi)部陰影工具，以及一個用于移除現(xiàn)有陰影的工具。你可以通過編輯你的 Tailwind 配置中的 ?theme.boxShadow? 部分來改變、增加或刪除這些。

如果提供了 ?DEFAULT ?影子，它將用于不帶后綴的 ?shadow ?實用程序。任何其他鍵都將用作后綴，例如鍵 2?'將創(chuàng)建相應(yīng)的 ?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 ?屬性設(shè)置為 ?false ?來完全禁用它們：

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