Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS实现文字描边 #60

Open
Tingglelaoo opened this issue Jul 20, 2017 · 0 comments
Open

CSS实现文字描边 #60

Tingglelaoo opened this issue Jul 20, 2017 · 0 comments

Comments

@Tingglelaoo
Copy link

Tingglelaoo commented Jul 20, 2017

方法一:利用多层文字阴影text-shadow

不够理想。

  • 最细的描边是跟号2(约等于1.414)px宽度的描 边,如果希望描边越宽,需要更多层的阴影来实现,这可能导致性能消耗大的问题。
  • 同时,描边会有缺角,并不是完全包裹,在描边越宽的情况下越明显。

方法二(推荐):使用属性-webkit-text-stroke

-webkit-text-stroke是应用于文字的描边特性的属性,尚未列入正式标准。
是以下属性的简写:

-webkit-text-stroke-width: 0
-webkit-text-stroke-color: currentColor

需要额外的修正。

  • 兼容性:需要-webkit-前缀支持。
  • 描边是同时向内外延展的,描边越大,字的内容越少,所以需要多覆盖一层文字来修正。
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant