利用文本阴影实现浮雕文字效果

开发调优
,
1

预览图

image
image758×293 8.01 KB

要点

  1. 文字与背景颜色相同
  2. 利用 text-shadow 来制造高光与阴影

代码

<p class='tu'>凸起</p>
<p class='ao'>凹陷</p>

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #999;
  gap: 40px;
}

p {
  font-size: 10em;
  font-weight: bold;
  color: #999;
}

p.tu {
  text-shadow: -1px -1px 2px #ddd, 1px 1px 2px #111;
}

p.ao {
  text-shadow: -1px -1px 2px #111, 1px 1px 2px #ddd;
}
10 个赞
2

哎呦,不错哦

1 个赞
3

牛逼，学！！

1 个赞
4

这效果有意思 :+1:

1 个赞
5

好好好！ :innocent:

2 个赞
6

太强了！感谢大佬

1 个赞
7

我来捧场了！

1 个赞
8

谢谢大帅哥！

9

太强了 鹅佬回一个

1 个赞
10

他不是回复了吗 :bili_004:

1 个赞
11

鹅佬是谁呀 :melting_face:

12

就是那个头像是绿底加一只大鹅的那个 :bili_004:

1 个赞
13

不过你不是在群里吗，怎么还能不知道啊 :bili_004:

1 个赞
14

@Clarke.L 这个就是

3 个赞
15

自从有了gpt好久没认真研究过代码了