✅ 纯 CSS、无外部文件
✅ 移动端完美兼容
✅ 高端、简约、大气
✅ 不破坏原有布局
下面每一种都是 成品样式,你只需要把 <h2> 相关的代码替换即可。
样式 1:胶囊渐变弧形(样式美观,推荐、最大气)
<h2 style="display: inline-block; font-size: 24px; font-weight: 700; color: #0F2B5B; background: linear-gradient(135deg, #e6f0ff, #f7faff); padding: 10px 24px; border-radius: 999px; box-shadow: 0 3px 12px rgba(22,93,255,0.12);">
全球航空公司列表
</h2>
样式 2:左侧彩色竖条 + 简约干净 (蓝色竖条)
<h2 style="font-size: 24px; font-weight: 700; color: #0F2B5B; padding-left: 14px; border-left: 4px solid #165DFF; line-height: 1.2;">
全球电脑公司列表
</h2>
样式 3:底部渐变下划线(看名字就懂,高级感)
<h2 style="font-size: 24px; font-weight: 700; color: #0F2B5B; padding-bottom: 8px; border-bottom: 3px solid transparent; border-image: linear-gradient(to right, #165DFF, #4D86FF) 1; display: inline-block;">
全球著名的虚拟主机公司列表
</h2>
样式 4:卡片背景式(浅蓝色背景 背景占一行 柔和、清爽)
<h2 style="font-size: 24px; font-weight: 700; color: #0F2B5B; background: #f5f9ff; padding: 12px 20px; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
全球手机公司列表
</h2>
样式 5:双线条装饰(标题前蓝色粗竖线,大气高级)
<h2 style="font-size: 24px; font-weight: 700; color: #0F2B5B; position: relative; padding: 0 16px;">
全球彩电公司列表
<span style="position:absolute; top:0; left:0; width:6px; height:100%; background:#165DFF; border-radius:4px;"></span>
</h2>
样式 6:小图标 + 标题(标题前是蓝色正方形图标)
<h2 style="display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 700; color: #0F2B5B;">
<span style="width: 28px; height: 28px; background: linear-gradient(135deg, #165DFF, #4D86FF); border-radius: 6px; display: flex; align-items: center; justify-content: center;">
<i class="fa-solid fa-plane" style="color:#fff; font-size:14px;"></i>
</span>
全球航空公司列表
</h2>
当前标题推荐替换掉的方案:
<h2 class="text-3xl font-bold text-dark-blue inline-block px-6 py-3"
style="background: linear-gradient(135deg, #e6f0ff 0%, #f0f7ff 100%);
border-radius: 50px;
box-shadow: 0 4px 15px rgba(22,93,255,0.1);">
全球情趣用品公司列表
</h2>
我最推荐的样式(背景浅蓝、胶囊形的,更精致):
<h2 style="display: inline-block; font-size: 24px; font-weight: 700; color: #0F2B5B; background: linear-gradient(135deg, #e6f0ff, #f7faff); padding: 10px 24px; border-radius: 999px; box-shadow: 0 3px 12px rgba(22,93,255,0.12);">
全球航空公司列表
</h2>
