空心文字与描边
空心文字：用 text-stroke 给文字描边，中心挖空。-webkit-text-stroke: 2px #fff 是标准写法，再设 color: transparent 即空心。描边文字配大字号标题非常有设计感。
兼容性：Chrome/Safari/Edge 支持 -webkit-text-stroke；Firefox 较新版本也已支持。兜底方案是用 paint-order: stroke fill 让描边不遮挡fill。
- -webkit-text-stroke: 宽度 颜色；配 color: transparent 变空心
- paint-order: stroke fill 先描边再填充，描边不抢文字内部
- 悬停时从空心变实心：transition color 即可
HTML
<style> .outline { text-align: center; font-size: 56px; font-weight: 900; margin: 30px 0; color: transparent; -webkit-text-stroke: 2px #f778ba; transition: color .4s ease, -webkit-text-stroke-color .4s; } .outline:hover { color: #f778ba; } </style> <div class="outline">悬停变实心</div>
本节要点空心文字 = text-stroke 描边 + color: transparent；悬停填色是最简切换特效。
