# 居中标题(加粗 + 渐变底色)
```
<p align="center">
<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;
">
居中标题(加粗 + 渐变底色)
</span>
</p>
```
效果:
<p align="center">
<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;
">
居中标题(加粗 + 渐变底色)
</span>
</p>
---
# 居中标题(加粗 + 渐变底色)+a超链接嵌入
```
<p align="center">
<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考证全攻略点我直达
</span>
</a>
</p>
```
效果:
<p align="center">
<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考证全攻略点我直达
</span>
</a>
</p>
---
# 居中标题(正常)+a超链接嵌入
<p align="center">
<a class="oscp-btn" href="https://mp.weixin.qq.com/s/R4r-tJd-T2ty2pMZMq8MeA" target="_blank" rel="noopener noreferrer" title="OSCP考证全攻略">
<span>OSCP考证全攻略点我直达</span>
</a>
</p>
<style>
/* 按钮基础样式 */
.oscp-btn {
text-decoration: none;
display: inline-block;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
/* 内部 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>