css效果-文字

css实现一些特殊的文字效果。

凸版印刷效果

知识点：text-shadow 实现：

1
2
3
background: hsl(210, 13%, 30%);
color: hsl(210, 13%, 60%);
text-shadow: 0 -1px 1px black;

空心文字

实现：

1
2
3
4
text-shadow: 1px 1px black,
            -1px -1px black,
            1px -1px black,
            -1px 1px black;

文字发光

1
2
3
4
5
6
7
8
a{
  color: #ffc;
  text-decoration: none;
  transition: 1s;
}
a:hover {
  text-shadow: 0 0 0.1em, 0 0 0.3em;
}

文字凸起

实现：

1
2
3
4
5
6
text-shadow: 0 1px hsl(0,0%,85%),
             0 2px hsl(0,0%,80%),
             0 3px hsl(0,0%,75%),
             0 4px hsl(0,0%,70%),
             0 5px hsl(0,0%,65%),
             0 5px 10px black;

0%