Bootstrap的.close按钮本质是渲染×字符的button，非SVG或伪元素；应直接调整font-size、color、line-height等文本属性，禁用text-shadow并重置hover opacity，若用图标字体则需清空原字符后通过::before注入。
关闭图标X实际是×字符，不是独立元素
Bootstrap 的 .close 按钮（如模态框右上角的 X）本质是一个带 × 字符的 <button>，没有 SVG 或伪元素。它默认用 font-family: "Times New Roman", Times, serif 渲染 ×，所以改样式核心是控制字体、大小、颜色和间距。
常见错误是试图用 ::before 覆盖或给 × 加背景——它只是文本，不是可替换内容。
- 直接修改
.close的font-size、color、line-height最有效 - 避免设置
width/height后不配padding，容易导致点击热区变小 - 若用自定义字体（如 Font Awesome），需确保字体加载完成且
font-family优先级正确
覆盖默认字体和尺寸的最小安全写法
Bootstrap 5 默认 .close 的 font-size 是 1.5rem，line-height 是 1，且有 opacity: .5 悬停效果。要稳定替换 × 的视觉表现，建议在自定义 CSS 中这样写：
.close {
font-family: system-ui, -apple-system, sans-serif;
font-size: 1.75rem;
line-height: 1;
color: #dc2626;
text-shadow: none;
}
.close:hover {
color: #b91c1c;
opacity: 1;
}注意：text-shadow: none 很关键——某些 Bootstrap 版本会给 × 加阴影，导致粗细不均；opacity: 1 在 hover 时重置，否则可能看不清变化。
立即学习“前端免费学习笔记（深入）”；
用伪元素完全替换 × 字符（需禁用原生内容）
如果必须用图标字体或 SVG，不能依赖 × 字符本身。此时要清空内容再注入：
.close {
position: relative;
font-size: 0; /* 压缩原字符 */
line-height: 0;
padding: 0.25rem;
}
.close::before {
content: "\f00d"; /* Font Awesome times icon */
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 1.5rem;
color: #dc2626;
}风险点：
- 必须确保 Font Awesome CSS 已加载，且
font-family名字完全匹配 -
font-size: 0在部分老浏览器中可能导致按钮高度塌陷，加padding补偿更稳 - 若用 SVG，得用
background-image+background-size，但会失去颜色继承能力
响应式场景下要注意垂直居中偏移
Bootstrap 的 .close 通常放在 .modal-header 或 .alert 右侧，靠 position: absolute 定位。当修改 font-size 或加 padding 后，常出现 X 偏上或偏下：
- 检查父容器是否设了
line-height，它会影响绝对定位的基线对齐 - 优先用
top: 50%+transform: translateY(-50%)替代margin-top - 在
@media (max-width: 576px)下单独缩小font-size，比如降到1.25rem，否则小屏挤出边框
真正难调的不是怎么改，而是改完后在不同组件（alert / modal / toast）里反复验证对齐和点击反馈——每个父容器的 padding 和 display 都可能让同一套 CSS 表现不一致。
