首页 综合 > 正文

每日看点![CSS-tricks]纯CSS实现文本外描边

2023-07-04 01:33:46 来源:哔哩哔哩


(资料图片仅供参考)

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

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

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

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

(从b站源码里偷的x

二、多重模糊text-shadow

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

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

三、多向text-shadow

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

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

标签:
x 广告
x 广告

Copyright ?  2015-2022 华尔街体育网版权所有  备案号:沪ICP备2022005074号-44   联系邮箱:58 55 97 3@qq.com