如何通过自定义CSS代码移除内容块顶部的标题渐变栏

可行解决方案 #

可直接尝试的CSS代码 #

之前的代码未生效大概率是选择器没有命中渐变所属的元素，这类顶部渐变条通常不会加在标题文本元素上，更多是加在内容块容器、标题容器或者伪元素上，依次尝试以下代码即可：

• 清除内容块容器本身的渐变/顶部装饰

.otw-sc-contentbox {
  background: transparent !important;
  background-image: none !important;
  border-top: none !important;
  box-shadow: none !important;
}

• 清除标题容器的渐变

.otw-sc-contentbox .otw-contentbox-title {
  background: transparent !important;
  background-image: none !important;
  border-top: 0 !important;
}

• 清除伪元素生成的渐变条（很多开发者会用伪元素实现这类顶部装饰条）

.otw-sc-contentbox::before,
.otw-contentbox-title::before {
  display: none !important;
  content: '' !important;
}

排查技巧 #

• 按F12打开浏览器开发者工具，用元素选择器直接点选页面上的渐变条，查看右侧「计算样式」栏的background-image、border-top、box-shadow三个属性，哪个有非默认值就针对性清除对应属性即可
• 代码添加后一定要清空浏览器缓存、站点CDN缓存再刷新预览，很多时候代码已生效，只是本地缓存了旧样式
• 如果始终找不到具体元素，可以用兜底方案强制清除所有内容块下属元素的背景图，优先级最高：

.otw-sc-contentbox, .otw-sc-contentbox * {
  background-image: none !important;
}

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