<!DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<
title
>Document
</
title
>
<
style
>
.art span {
/* 控制字体大小 */
font-size:
200px;
/*字体的颜色*/
color:
rgb(
247,
181,
60);
/*这是核心代码,主要是利用阴影*/
/*第一个值:水平阴影的位置,正值向右,负值向左,
第二个值:垂直阴影的位置
第三个值:模糊的距离
第四个值:阴影颜色*/
/*主要是利用阴影不断重叠,就能写出我们的艺术字了
第一个颜色用白色效果会更好,可以自己试一下区别。
*/
text-shadow:
-1px
1px
1px
white,
-3px
1px
1px
rgb(
231,
173,
56),
-5px
1px
1px
rgb(
224,
159,
53),
-7px
1px
1px
rgb(
221,
163,
54),
-9px
1px
1px
rgb(
215,
155,
53),
-11px
1px
1px
rgb(
211,
167,
55),
-13px
1px
1px
rgb(
221,
163,
54),
-15px
1px
1px
rgb(
219,
161,
54),
-17px
1px
1px
rgb(
212,
157,
54),
-19px
1px
1px
rgb(
207,
152,
50),
-21px
1px
1px
rgb(
197,
145,
48),
-23px
1px
1px
rgb(
202,
149,
49),
-25px
1px
1px
rgb(
196,
142,
42);
}
<
/
style
>
</
head
>
<
body
>
<
div
class=
"art"
>
<
span
>J
</
span
>
<
span
>o
</
span
>
<
span
>k
</
span
>
<
span
>e
</
span
>
<
span
>r
</
span
>
</
div
>
</
body
>
</
html
>