使用CSS实现低保真图文本

最近在学网页前端，想试着实现低保真图下的那种伪文本，然后我试着去实现了一下。

首先在HTML里面写下以下文本

我一般会在一个新块定义一个class，这样方便后续操作，然后接着因为我们要在对应行进行一定的操作，所以每一个span都有一个class，并且每一行都要手动换行。

每个span里面的内容都是一个空格，主要的效果还是在CSS里面实现。

CSS部分主要分两个部分，一个是low类里面进行操作，一个是firstlow类里面进行操作。控制第一行和其他行不一样。

width属性控制低保真图文本的长度

border-width属性控制低保真图文本的宽度

border-style属性控制低保真图文本样式，因为本质是border

border-radius属性控制边缘光滑程度

zoom属性放大

display:inline-block保持文本以inline-block的形式display

magin-left属性控制第一行位置的偏移

最后结果大概是这个样子

希望本文章能帮助到你