样式大全（自用整理）

# 居中标题（加粗 + 渐变底色）
```

 
 居中标题（加粗 + 渐变底色）

```
效果：

 
 居中标题（加粗 + 渐变底色）

---

# 居中标题（加粗 + 渐变底色）+a超链接嵌入
```

 <a href="https://mp.weixin.qq.com/s/R4r-tJd-T2ty2pMZMq8MeA" target="_blank" rel="noopener noreferrer" title="OSCP考证全攻略">
 <span style="
 background: linear-gradient(to right, rgb(64,49,76) 0%, rgb(76,35,45) 100%);
 color: white;
 font-weight: bold;
 padding: 6px 12px;
 border-radius: 6px;
 display: inline-block;
 ">
 OSCP考证全攻略点我直达
 
 </a>

```
效果：

 <a href="https://mp.weixin.qq.com/s/R4r-tJd-T2ty2pMZMq8MeA" target="_blank" rel="noopener noreferrer" title="OSCP考证全攻略">
 <span style="
 background: linear-gradient(to right, rgb(64,49,76) 0%, rgb(76,35,45) 100%);
 color: white;
 font-weight: bold;
 padding: 6px 12px;
 border-radius: 6px;
 display: inline-block;
 ">
 OSCP考证全攻略点我直达
 
 </a>

---

# 居中标题（正常）+a超链接嵌入

<a class="oscp-btn" href="https://mp.weixin.qq.com/s/R4r-tJd-T2ty2pMZMq8MeA" target="_blank" rel="noopener noreferrer" title="OSCP考证全攻略">
 OSCP考证全攻略点我直达
 </a>

/* 内部 span 的外观与过渡 */
.oscp-btn span{
  display: inline-block;
  padding: 6px 12px;
  color: #fff;
  font-weight: bold;
  background: linear-gradient(90deg, rgb(64,49,76) 0%, rgb(76,35,45) 100%);
  transition: background 250ms ease, transform 200ms ease, color 200ms ease;
  border-radius: 6px;
}

/* 悬停/聚焦态：改变渐变色并略微放大 */
.oscp-btn:hover span,
.oscp-btn:focus span{
  background: linear-gradient(90deg, #9b59b6 0%, #e74c3c 100%); /* 悬停颜色 */
  transform: translateY(-3px) scale(1.02);
  color: #fff;
}

/* 为键盘导航提供可见的焦点样式（可访问性） */
.oscp-btn:focus{
  outline: 3px solid rgba(155,89,182,0.18);
  outline-offset: 4px;
  border-radius: 8px;
}

/* 小屏幕时保证文本不换行导致溢出 */
@media (max-width:420px){
 .oscp-btn span{ padding:8px 10px; white-space:nowrap; }
}
</style>