Css3液晶数字 |css样式表使用方式

HTML代码：
<div class="num"></div>
CSS代码：
.num {
padding: 10px;
background: url('https://i.imgur.com/Vc0RtCC.png') no-repeat;
color: transparent;
text-shadow: 0 0 0 #fff, 2px 2px 1px rgba(0,0,0,.2);
font-size: 50px;
display: inline-block;
}
.num:after {
content: attr(data-number);
color: #fff;
}

首先，在HTML中创建一个类名为“num”的div标签用于承载数字效果。然后，在CSS中对这个div标签进行样式设置。

大家通过background属性将一个液晶数字的背景图片设置为此div标签的背景，而text-shadow则是为了在数字的内部产生阴影效果。color属性设置字体颜色为透明，然后再在num:after伪元素中使用attr()函数将div标签中的data-number属性值，即数字展示出来。

最后，通过设置font-size、padding属性设置数字大小以及数字与周围内容之间的间距，display：inline-block是使div标签水平排列。

以上就是CSS3液晶数字的实现方法，值得一提的是，在制作液晶数字时需要找到合适的数字背景图片，这要求设计者具有一定的图片处理能力。