# 居中标题(加粗 + 渐变底色) ``` <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>