H3或h4标题更多样式代码设计

给标题加 多种预设样式，想换哪个用哪个，不用反复改 CSS。

方法：给 h3 多加几个 class 样式

你只需要在 CSS 里多写几套样式，HTML 里换 class 就行。

1. 先把基础 CSS 改成这样（通用 + 多风格）:

/* 基础共用样式 */ .article-content h3 { font-size: 1em; padding: 8px 12px; margin: 20px 0 12px; line-height: 1.5; font-weight: 600; border-radius: 4px; display: inline-block; white-space: normal; word-wrap: break-word; max-width: 100%; } /* 样式1：白底红字 + 左边红竖线 */ .article-content h3.style1 { color: #e53e3e; background: #ffffff; border-left: 4px solid #e53e3e; } /* 样式2：红底白字（你现在用的） */ .article-content h3.style2 { color: #fff; background: #e53e3e; border-left: 4px solid #fff; } /* 样式3：灰底黑字 + 左边灰线 */ .article-content h3.style3 { color: #333; background: #f5f5f5; border-left: 4px solid #666; } /* 样式4：蓝底白字 */ .article-content h3.style4 { color: #fff; background: #3688ff; border-left: 4px solid #fff; } /* 样式5：黑底白字 */ .article-content h3.style5 { color: #fff; background: #222; border-left: 4px solid #fff; } /* 样式6：只有左边线，无背景 */ .article-content h3.style6 { color: #333; background: transparent; border-left: 4px solid #e53e3e; padding-left: 14px; }

2. HTML 里这样用（想换哪个就换 class）

<h3 class="style1">标题样式1</h3>
<h3 class="style2">标题样式2</h3>
<h3 class="style3">标题样式3</h3>
<h3 class="style4">标题样式4</h3>
<h3 class="style5">标题样式5</h3>
<h3 class="style6">标题样式6</h3>

想自己再加更多样式？
复制下面格式，改颜色就能无限加：

.article-content h3.styleX { color: 文字颜色; background: 背景颜色; border-left: 4px solid 左边线颜色; }

圆角 + 渐变背景，自带自动换行，白色文字，代码：

.article-content h3 { font-size: 1em; color: #fff; background: linear-gradient(90deg, #e53e3e, #ff6b6b); border-left: 4px solid #fff; padding: 8px 12px; margin: 20px 0 12px; line-height: 1.5; font-weight: 600; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); display: inline-block; position: relative; white-space: normal; word-wrap: break-word; max-width: 100%; }

下面是红色背景，白色字体：

.article-content h4 {
  font-size: 1em;
  color: #fff;
  background-color: #e53e3e;
  border-left: 4px solid #fff;
  padding: 8px 12px;
  margin: 20px 0 12px;
  line-height: 1.5;
  font-weight: 600;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  display: inline-block;
  position: relative;
  white-space: normal;
  word-wrap: break-word;
  max-width: 100%;
}