好看的H2标题样式 内置CSS直接搬来用

2026-04-27 15:38 AI助手
这些h2标题样式具有的特点:
✅ 纯 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>
【收藏本页】Ctrl+D或转到
相关阅读

意见反馈

© 2017-2026 上海好生活 https://www.zhaozhishi.net/
上海生活网站是上海分类信息平台之一,便民信息和免费信息发布