跳到主要内容
输入关键词开始搜索，↑ ↓ 选择，Enter 打开
没有找到匹配的文档

阴影

使用 box-shadow 工具为元素添加或移除阴影。

查看原文
本页目录
类名样式
.阴影box-shadow: 0 .125rem .25rem -.0625rem oklch(from var(--bs-sc, var(--bs-shadow-color)) l c h / calc(.04 * var(--bs-shadow-strength) * var(--bs-so, 1))), 0 .375rem .75rem -.125rem oklch(from var(--bs-sc, var(--bs-shadow-color)) l c h / calc(.05 * var(--bs-shadow-strength) * var(--bs-so, 1))), 0 .75rem 1.5rem -.25rem oklch(from var(--bs-sc, var(--bs-shadow-color)) l c h / calc(.06 * var(--bs-shadow-strength) * var(--bs-so, 1)));
.shadow-xsbox-shadow: 0 0.0625rem 0.125rem oklch(from var(--bs-sc, var(--bs-shadow-color)) l c h/calc(0.04 * var(--bs-shadow-strength) * var(--bs-so, 1)));
.shadow-smbox-shadow: 0 .0625rem .125rem oklch(from var(--bs-sc, var(--bs-shadow-color)) l c h / calc(.04 * var(--bs-shadow-strength) * var(--bs-so, 1))), 0 .125rem .375rem -.0625rem oklch(from var(--bs-sc, var(--bs-shadow-color)) l c h / calc(.05 * var(--bs-shadow-strength) * var(--bs-so, 1)));
.shadow-lgbox-shadow: 0 .125rem .375rem -.0625rem oklch(from var(--bs-sc, var(--bs-shadow-color)) l c h / calc(.05 * var(--bs-shadow-strength) * var(--bs-so, 1))), 0 .375rem 1rem -.1875rem oklch(from var(--bs-sc, var(--bs-shadow-color)) l c h / calc(.06 * var(--bs-shadow-strength) * var(--bs-so, 1))), 0 .75rem 2rem -.375rem oklch(from var(--bs-sc, var(--bs-shadow-color)) l c h / calc(.07 * var(--bs-shadow-strength) * var(--bs-so, 1))), 0 1.5rem 3.5rem -.75rem oklch(from var(--bs-sc, var(--bs-shadow-color)) l c h / calc(.08 * var(--bs-shadow-strength) * var(--bs-so, 1)));
.shadow-xlbox-shadow: 0 .1875rem .5rem -.0625rem oklch(from var(--bs-sc, var(--bs-shadow-color)) l c h / calc(.05 * var(--bs-shadow-strength) * var(--bs-so, 1))), 0 .5rem 1.25rem -.1875rem oklch(from var(--bs-sc, var(--bs-shadow-color)) l c h / calc(.06 * var(--bs-shadow-strength) * var(--bs-so, 1))), 0 1rem 2.5rem -.375rem oklch(from var(--bs-sc, var(--bs-shadow-color)) l c h / calc(.07 * var(--bs-shadow-strength) * var(--bs-so, 1))), 0 2rem 5rem -.75rem oklch(from var(--bs-sc, var(--bs-shadow-color)) l c h / calc(.09 * var(--bs-shadow-strength) * var(--bs-so, 1)));
.shadow-nonebox-shadow: none;

示例

虽然组件上的阴影默认通过 $enable-shadows 启用，但你始终可以使用我们的 box-shadow 工具类管理阴影。包括对 .shadow-none 的支持以及多种尺寸（这些尺寸有相应的变量匹配）。

为了获得更现代、更平滑的外观，阴影是“分层”的 box-shadow 声明。更具体地说：

  • 每个阴影大小标记包含多个 box-shadow 值，以提供更自然的渐变效果。
  • 默认情况下，每一层的颜色都来源于全局 --shadow-color 标记，.shadow-{color} 工具可以在单个元素上覆盖它——无需重新着色任何嵌套阴影——以快速完成一次性高亮。
  • 类似地，全局 --shadow-strength 标记（1 对应明亮模式，2.4 对应暗黑模式）会加深每个阴影，同时作为一个旋钮来一次性缩放所有阴影。
无影
小影子
常规阴影
更大的影子
超大阴影
HTML
<div class="shadow-none p-3 bg-body rounded">No shadow</div>
<div class="shadow-sm p-3 bg-body rounded">Small shadow</div>
<div class="shadow p-3 bg-body rounded">Regular shadow</div>
<div class="shadow-lg p-3 bg-body rounded">Larger shadow</div>
<div class="shadow-xl p-3 bg-body rounded">Extra large shadow</div>

阴影颜色

使用.shadow-{color}工具类将阴影颜色更改为任意主题颜色，还可以使用.shadow-current（与元素的color匹配）、.shadow-black和.shadow-white。将颜色工具类与尺寸工具类搭配使用。带颜色的阴影刻意保持低调——想要更明显的色调，可以使用较大的尺寸，例如.shadow-xl。

--bs-sc 变量已在 @property 中注册为不继承（inherits: false），因此阴影颜色工具类的作用范围仅限于应用它们的元素，永远不会级联到嵌套的元素或组件中。这就是为什么 --bs-sc 故意与继承的 --bs-shadow-color 设计标记分开，而阴影的默认颜色从该设计标记中解析。

主要的
成功
危险
黑色
HTML
<div class="shadow-xl shadow-primary p-3 bg-body rounded">Primary</div>
<div class="shadow-xl shadow-success p-3 bg-body rounded">Success</div>
<div class="shadow-xl shadow-danger p-3 bg-body rounded">Danger</div>
<div class="shadow-xl shadow-black p-3 bg-body rounded">Black</div>

嵌套元素

因为阴影颜色和不透明度工具设置了非继承的 --bs-sc 和 --bs-so 变量，父元素的 .shadow-{color} 或 .shadow-opacity-* 不会影响嵌套元素的阴影。如下所示，父元素使用了 .shadow-primary，而嵌套的 .shadow-xl 保持默认阴影颜色。

带有 .shadow-primary 的父元素
嵌套的 .shadow-xl 保持默认颜色。
HTML
<div class="shadow-xl shadow-primary p-4 bg-body rounded-7">
  Parent with .shadow-primary
  <div class="shadow-xl p-3 mt-3 bg-body rounded-3">
    Nested .shadow-xl keeps the default color.
  </div>
</div>

阴影不透明度

使用 .shadow-opacity-{10-100} 工具调整阴影强度。透明度被视为中点，而不是上限：默认阴影匹配 .shadow-opacity-50，因此较低的值会使阴影变浅，而较高的值（最多到 .shadow-opacity-100）会加深阴影。此方法适用于任何大小或颜色工具。像 --bs-sc 一样，--bs-so 是针对元素的，因此应将其与同一元素上的大小或颜色工具搭配使用，而不是指望它会继承。

20%
50%（默认）
100%
HTML
<div class="shadow-xl shadow-opacity-20 p-3 bg-1 rounded">20%</div>
<div class="shadow-xl shadow-opacity-50 p-3 bg-body rounded">50% (default)</div>
<div class="shadow-xl shadow-opacity-100 p-3 bg-body rounded">100%</div>

即使使用自定义阴影颜色也能工作：

20%
50%（默认）
100%
HTML
<div class="shadow-xl shadow-opacity-20 shadow-primary p-3 bg-body rounded">20%</div>
<div class="shadow-xl shadow-opacity-50 shadow-primary p-3 bg-body rounded">50% (default)</div>
<div class="shadow-xl shadow-opacity-100 shadow-primary p-3 bg-body rounded">100%</div>

CSS

Sass 变量

scss/_root.scss
// --box-shadow* tokens are generated below (see root-box-shadow-loop) from
// the shared $shadows map in scss/_config.scss, which reads these two.
--shadow-color: #000,
--shadow-strength: 1,
scss/_config.scss
$shadows: (
  null: #{(
    "0 .125rem .25rem -.0625rem oklch(from var(--sc, var(--shadow-color)) l c h / calc(.04 * var(--shadow-strength) * var(--so, 1)))",
    "0 .375rem .75rem -.125rem oklch(from var(--sc, var(--shadow-color)) l c h / calc(.05 * var(--shadow-strength) * var(--so, 1)))",
    "0 .75rem 1.5rem -.25rem oklch(from var(--sc, var(--shadow-color)) l c h / calc(.06 * var(--shadow-strength) * var(--so, 1)))"
  )},
  xs: 0 .0625rem .125rem oklch(from var(--sc, var(--shadow-color)) l c h / calc(.04 * var(--shadow-strength) * var(--so, 1))),
  sm: #{(
    "0 .0625rem .125rem oklch(from var(--sc, var(--shadow-color)) l c h / calc(.04 * var(--shadow-strength) * var(--so, 1)))",
    "0 .125rem .375rem -.0625rem oklch(from var(--sc, var(--shadow-color)) l c h / calc(.05 * var(--shadow-strength) * var(--so, 1)))"
  )},
  lg: #{(
    "0 .125rem .375rem -.0625rem oklch(from var(--sc, var(--shadow-color)) l c h / calc(.05 * var(--shadow-strength) * var(--so, 1)))",
    "0 .375rem 1rem -.1875rem oklch(from var(--sc, var(--shadow-color)) l c h / calc(.06 * var(--shadow-strength) * var(--so, 1)))",
    "0 .75rem 2rem -.375rem oklch(from var(--sc, var(--shadow-color)) l c h / calc(.07 * var(--shadow-strength) * var(--so, 1)))",
    "0 1.5rem 3.5rem -.75rem oklch(from var(--sc, var(--shadow-color)) l c h / calc(.08 * var(--shadow-strength) * var(--so, 1)))"
  )},
  xl: #{(
    "0 .1875rem .5rem -.0625rem oklch(from var(--sc, var(--shadow-color)) l c h / calc(.05 * var(--shadow-strength) * var(--so, 1)))",
    "0 .5rem 1.25rem -.1875rem oklch(from var(--sc, var(--shadow-color)) l c h / calc(.06 * var(--shadow-strength) * var(--so, 1)))",
    "0 1rem 2.5rem -.375rem oklch(from var(--sc, var(--shadow-color)) l c h / calc(.07 * var(--shadow-strength) * var(--so, 1)))",
    "0 2rem 5rem -.75rem oklch(from var(--sc, var(--shadow-color)) l c h / calc(.09 * var(--shadow-strength) * var(--so, 1)))"
  )},
  inset: inset 0 1px 2px light-dark(oklch(from var(--sc, var(--shadow-color)) l c h / calc(8% * var(--so, 1))), oklch(from var(--sc, var(--shadow-color)) l c h / calc(26% * var(--so, 1)))),
);

Sass 工具 API

Shadow 工具在我们的工具 API scss/_utilities.scss 中声明。了解如何使用工具 API。

scss/_utilities.scss
"shadow": (
  property: box-shadow,
  class: shadow,
  // Pull the literal layered expressions straight from the shared $shadows
  // map (single source of truth in scss/_config.scss, also consumed by
  // scss/_root.scss). Emitting the literal—rather than var(--box-shadow-*)—
  // keeps the nested var(--sc, var(--shadow-color)) / var(--so, 1)
  // unresolved so they resolve on the element, letting .shadow-{color} and
  // .shadow-opacity-* take effect. `inset` isn't a utility, so it's excluded.
  values: map.merge(map.remove($shadows, inset), (none: none))
),
// scss-docs-end utils-shadow
// scss-docs-start utils-shadow-color
"shadow-color": (
  // --sc is a local override composed into the $shadows expressions
  // (scss/_config.scss) as var(--sc, var(--shadow-color)); like --bc for
  // border-color, it's non-inheriting so .shadow-primary doesn't tint
  // nested .shadow-* descendants, which instead fall back to the
  // cascading global --shadow-color token (scss/_root.scss).
  property: --sc,
  class: shadow,
  values: map-merge-multiple(
    theme-color-refs("base"),
    (
      "current": currentcolor,
      "black": var(--black),
      "white": var(--white),
    )
  )
),
// scss-docs-end utils-shadow-color
// scss-docs-start utils-shadow-opacity
"shadow-opacity": (
  // --so is a local override composed into the $shadows expressions
  // (scss/_config.scss) as var(--so, 1); same rationale as --sc above,
  // it's non-inheriting so it doesn't leak to nested .shadow-* descendants.
  property: --so,
  class: shadow-opacity,
  values: $shadow-opacities
),
scss/_utilities.scss
"shadow-color": (
  // --sc is a local override composed into the $shadows expressions
  // (scss/_config.scss) as var(--sc, var(--shadow-color)); like --bc for
  // border-color, it's non-inheriting so .shadow-primary doesn't tint
  // nested .shadow-* descendants, which instead fall back to the
  // cascading global --shadow-color token (scss/_root.scss).
  property: --sc,
  class: shadow,
  values: map-merge-multiple(
    theme-color-refs("base"),
    (
      "current": currentcolor,
      "black": var(--black),
      "white": var(--white),
    )
  )
),
scss/_utilities.scss
"shadow-opacity": (
  // --so is a local override composed into the $shadows expressions
  // (scss/_config.scss) as var(--so, 1); same rationale as --sc above,
  // it's non-inheriting so it doesn't leak to nested .shadow-* descendants.
  property: --so,
  class: shadow-opacity,
  values: $shadow-opacities
),