纯CSS实现文本外描边

CSS-tricks
972 词

一、透明text-stroke + 文本裁剪background

1
2
3
4
color:#000;
-webkit-text-stroke:3px transparent;
background:linear-gradient(90deg,red,orange,yellow,green,cyan,blue,purple) top left / 100% 100%;
-webkit-background-clip: text;

效果完美，还能整些花活，但某些情况可能无法使用。
单用text-stroke，会同时产生内描边，这在一些情况下是不希望发生的，特别是描边比例过大时。
使用有透明text-stroke的文本裁剪背景，背景便填充在未被文本覆盖的stroke中，从而消除内描边。
（从b站源码里偷的x

二、多重模糊text-shadow

1
2
color:#000;
text-shadow:0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red;

会出现边缘模糊，但兼容性好。
使用无偏移、带模糊半径的扩散text-shadow，从而产生外描边，但是边缘会产生模糊。

三、多向text-shadow

1
2
color:#000;
text-shadow:2px 0 red,-2px 0 red,0 2px red,0 -2px red,1.4px 1.4px red,1.4px -1.4px red,-1.4px 1.4px red,-1.4px -1.4px red;

边缘锐利，但可产生部分瑕疵。
使用多向偏移的无模糊text-shadow，实现锐利边缘，但是在某些地方可能产生瑕疵，增加更多方向可能可以优化。
可以在这里生成css：StrokeGenerator