您当前的位置:首页 >> 民生 >> 
微头条丨[CSS-tricks]纯CSS实现文本外描边

时间:2023-07-04 01:16:08    来源:哔哩哔哩


【资料图】

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

效果完美,还能整些花活,但某些情况可能无法使用。

单用text-stroke,会同时产生内描边,这在一些情况下是不希望发生的,特别是描边比例过大时。

使用有透明text-stroke的文本裁剪背景,背景便填充在未被文本覆盖的stroke中,从而消除内描边。

(从b站源码里偷的x

二、多重模糊text-shadow

会出现边缘模糊,但兼容性好。

使用无偏移、带模糊半径的扩散text-shadow,从而产生外描边,但是边缘会产生模糊。

三、多向text-shadow

边缘锐利,但可产生部分瑕疵。

使用多向偏移的无模糊text-shadow,实现锐利边缘,但是在某些地方可能产生瑕疵,增加更多方向可能可以优化。

标签: