为Bootstrap主题添加图片阴影（CSS）无效问题求助

嘿，我之前踩过一模一样的坑！在Bootstrap里自定义样式没效果，大概率是CSS优先级冲突或者样式加载顺序不对导致的，下面给你几个排查和解决的方向：

1. 先确认自定义样式的加载顺序 #

Bootstrap的核心CSS会覆盖你的自定义样式，所以必须保证custom.css是在Bootstrap CSS之后加载的。比如你的HTML里应该是这样的顺序：

<!-- 先加载Bootstrap的样式文件 -->
<link rel="stylesheet" href="path/to/bootstrap.min.css">
<!-- 再加载你的自定义样式 -->
<link rel="stylesheet" href="path/to/custom.css">

如果顺序搞反了，Bootstrap的样式会直接覆盖你写的阴影规则。

2. 提高选择器的优先级 #

Bootstrap对img元素（比如.img-fluid类）的样式优先级很高，你需要让你的阴影选择器更具体才能生效。举个例子：

不好用的写法（优先级太低）： #

img {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

推荐的写法： #

• 给图片加一个自定义类，比如img-shadow，然后用类选择器：

.img-shadow {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

然后在HTML里给图片加上这个类：<img src="..." class="img-fluid img-shadow">

• 或者结合Bootstrap的已有类来提高优先级（不用加新类）：

.img-fluid {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

⚠️ 实在没办法的时候可以用!important强制生效，但尽量少用，会增加样式维护的难度：

img {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

3. 用浏览器开发者工具排查冲突 #

按F12打开开发者工具，选中你的图片元素，查看「样式」面板：

• 看看你写的box-shadow是不是被划掉了（说明被更高优先级的样式覆盖）
• 找到覆盖它的Bootstrap样式规则，然后写一个比它更具体的选择器就行

4. 确认阴影参数是否可见 #

有时候不是样式没生效，而是阴影太淡或者参数设置得太隐蔽。可以先测试一个明显的阴影参数：

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

这个阴影比较明显，能快速判断样式是否生效。

内容的提问来源于stack exchange，提问作者sunwarr10r