有时,我们会遇到UI稿有文字描边的效果,比如下图的效果。
一、给需要描边的文字加一个id选择器
例如:
二、css写法:
number,
{
//这个是实现文字描边的关键,也就是‘空心文字’,这个是定义文字字符的描边的宽度和颜色。
-webkit-text-stroke: #f4f6f6 10px;
color: #276a84;
font-family: "FZLT";
&::before {
content: attr(id);
position: absolute;
-webkit-text-stroke: 1px;
color: #276a84;
}
}