文字描边

文字描边是一种常见的视觉效果，可以让文字在复杂背景下更突出，或者单纯作为装饰增强设计感。CSS3 提供了多种方式实现文字描边，包括 text-stroke、text-shadow 以及 SVG 方案，每种方法各有特点。

使用 text-stroke 实现描边

text-stroke 是 CSS3 专为文字描边设计的属性，它包含两个子属性：

• -webkit-text-stroke-width：控制描边宽度（如 2px）。
• -webkit-text-stroke-color：定义描边颜色（如 #ff0000）。

.stroke-example {
  font-size: 48px;
  -webkit-text-stroke: 2px #000;
  color: transparent; /* 隐藏填充色，仅显示描边 */
}

效果对比：

• 默认情况下，描边会叠加在文字原有颜色上。若想仅保留描边轮廓，需将 color 设为 transparent。
• 兼容性方面，text-stroke 仅支持 WebKit 内核浏览器（Chrome、Safari），需加 -webkit- 前缀。

通过 text-shadow 模拟描边

text-shadow 通过叠加多个阴影模拟描边效果，兼容性更好，但代码稍复杂。

单方向描边：

.shadow-simple {
  text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000;
}

更精细的 8 方向描边：

.shadow-detail {
  text-shadow: 
    -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    0 -2px 0 #000,
    0 2px 0 #000,
    -2px 0 0 #000,
    2px 0 0 #000;
}

优缺点：

• 优点：支持所有现代浏览器，可通过调整阴影模糊值实现渐变描边。
• 缺点：多层阴影可能导致性能问题，且无法完美还原圆角描边。

SVG 实现动态描边

SVG 的 <text> 元素结合 stroke 属性可实现更灵活的描边，甚至支持动画：

<svg width="300" height="100">
  <text 
    x="50%" y="50%" 
    font-size="40" 
    text-anchor="middle" 
    dominant-baseline="middle"
    fill="none" 
    stroke="#000" 
    stroke-width="2">
    描边文字
  </text>
</svg>

进阶技巧：

• 使用 stroke-dasharray 和 stroke-dashoffset 实现描边动画：

text {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 3s forwards;
}
@keyframes draw {
  to { stroke-dashoffset: 0; }
}

混合方案与创意效果

结合多种技术可实现独特效果，例如：

渐变描边文字：

.gradient-stroke {
  color: white;
  -webkit-text-stroke: 2px transparent;
  background: linear-gradient(90deg, red, blue);
  -webkit-background-clip: text;
  text-shadow: none;
}

内外双描边：

.double-stroke {
  color: yellow;
  text-shadow: 
    -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    -3px -3px 0 red,
    3px -3px 0 red,
    -3px 3px 0 red,
    3px 3px 0 red;
}

实际应用中的注意事项

1. 性能优化：避免在移动端滥用多层 text-shadow。
2. 无障碍设计：确保描边文字与背景的对比度符合 WCAG 标准。
3. 响应式适配：通过媒体查询调整描边宽度，避免小屏幕上文字模糊：

@media (max-width: 600px) {
  .responsive-stroke {
    -webkit-text-stroke-width: 1px;
  }
}