cssscale方法文字模糊怎么解决

html-css018

cssscale方法文字模糊怎么解决,第1张

1.改变字体大小。增大字号,可以尽可能的让文字接近正常的大小,从而减少模糊的程度。

2.改变屏幕分辨率。把屏幕分辨率调到一个较高的值,可以改善文字的清晰度。

3.通过css3中的text-shadow属性来给文字加上阴影,从而减轻文字模糊的程度。

4.使用hint属性来为cssscale提供hint信息,从而获得更为清晰的输出。

filter 属性定义了元素(通常是img)的可视效果(例如:模糊与饱和度)。

语法:

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url()

使用效果: 查看demo

demo 是我的GitHub主页,当鼠标放在圆形上面的时候,圆形会旋转,这里主要应用了 animation 属性。而绿色圆形的下面那层投影的模糊效果则是运用了下面这条属性:

而完整卡片又该怎么写呢?

首先是它的 <html>结构:

CSS样式:

圆角背景:

圆形样式:

投影层的样式:

文字的样式:

如此,便可不用一张图,写出这张卡片了。