Bootstrap 5 文本阴影效果实现 TextShadow-Bootstrap教程-PHP中文网

bootstrap 5 移除了 text-shadow 工具类，因其易损可访问性，官方建议手写 css 或通过 sass utilities-api 扩展；推荐自定义 .text-shadow-sm/md/lg/none 类并注意层叠顺序、对比度与字体大小。

bootstrap 5 文本阴影效果实现 textshadow

Bootstrap 5 本身不提供 `text-shadow` 工具类

Bootstrap 5 移除了所有与 text-shadow 相关的内置工具类（比如旧版的 text-shadow 或 text-shadow-sm），也不再通过 Sass 变量或 utilities 自动编译生成。这不是遗漏，而是设计取舍——文本阴影属于强视觉定制项，容易破坏可访问性（如对比度下降），官方建议按需手写 CSS。

如果你在文档里搜不到 text-shadow 类，不是你漏装了插件，是它真没了。

用自定义 CSS 实现可控的 `text-shadow` 工具类

最直接的办法是在项目 CSS 中补充几个常用值的 utility 类，保持与 Bootstrap 命名风格一致：

.text-shadow-sm { text-shadow: 0 1px 2px rgba(0,0,0,.2); }
.text-shadow-md { text-shadow: 0 2px 4px rgba(0,0,0,.25); }
.text-shadow-lg { text-shadow: 0 4px 8px rgba(0,0,0,.3); }
.text-shadow-none { text-shadow: none; }

这样就能像其他 Bootstrap 类一样使用：<p class="text-shadow-md text-white">标题</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap"><img src="https://img.php.cn/upload/skill/000/000/081/179025304626966.jpg" alt="VPS Bootstrap" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="overflowclass">VPS Bootstrap</a> <p class="overflowclass">从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。</p> </div> <a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>。

注意顺序：把 text-shadow-* 放在 text-* 类之后，避免被覆盖（CSS 层叠）
颜色要配好：加阴影后文字色和背景色的对比度可能不达标，WCAG 要求至少 4.5:1，可用 WebAIM 对比度检查器验证
别对小字号文本滥用：12px 以下文字加 text-shadow 容易模糊，尤其在 Windows 渲染下

用 Sass 变量 + `utilities-api` 扩展（适合长期维护项目）

如果你已用 Sass 编译 Bootstrap，并希望未来统一管理，可以利用其 utilities-api 注入新工具类：

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/utilities/api";
<p>$utilities: map-merge(
$utilities,
(
"text-shadow": (
property: text-shadow,
class: text-shadow,
values: (
sm: 0 1px 2px rgba(0,0,0,.2),
md: 0 2px 4px rgba(0,0,0,.25),
lg: 0 4px 8px rgba(0,0,0,.3),
none: none
)
)
)
);</p>

这样生成的类名就是 text-shadow-sm、text-shadow-none 等，和原生 utilities 行为一致（支持响应式前缀如 sm:text-shadow-md，如果启用了响应式 utilities）。

必须确保在 @import "bootstrap/scss/utilities" 之后、@import "bootstrap/scss/utilities/api" 之前注入
值中不能含空格分隔的多个声明（如 0 1px 2px #000, 0 -1px 1px #fff）——utilities-api 不支持逗号分隔的多值，会解析失败