使用HTML+CSS完成一个简单的立体字效果_前端文字有立体感

作者：你好赵伟 | 2024-02-16 21:14:38

踩

前端文字有立体感

*使用HTML+CSS完成一个简单的立体字效果**

此处用木兰辞来举列子

来看看效果

ps：技术不佳大佬们轻喷
在这里插入图片描述

/*标题及其立体效果*/
.Header {
    /*font-size: 50px;*/
    /*font-weight: inherit;*/
    /*!*斜体*!*/
    /*font-style: italic;*/
    /*可以用智能font写法如下也可以用上面几行写*/
    font: bold italic 50px/30px "Adobe 宋体 Std L";
    text-align: center;
    color: darkblue;
    text-shadow: -3px -3px 10px white, 3px 3px 10px black;
}
/*作者简写和朝代*/
.Header2 {
    text-align: center;
    /*font-style: italic;*/

}
/*文本简写*/
p {
    text-align: center;
    color: black;
    text-indent: 2em;
    /*font-style: italic;*/
}

* {
    background: white;
}

Markdown将文本转换为 HTML。

*[HTML]:   超文本标记语言
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>诗歌</title>
    <link rel="icon" href="诗歌.svg">
    <link rel="stylesheet" href="poemstyle.css">

</head>
<body>
<h1 class="Header">木兰辞</h1>
<h5 class="Header2">【作者】佚名</h5>
<h5 class="Header2">【朝代】南北朝译文</h5>
<p class="Page">唧唧复唧唧，木兰当户织。不闻机杼声，惟闻女叹息。问女何所思，问女何所忆。女亦无所思，女亦无所忆。</p>

<p class="Page">昨夜见军帖，可汗大点兵，军书十二卷，卷卷有爷名。阿爷无大儿，木兰无长兄，愿为市鞍马，从此替爷征。</p>

<p class="Page">东市买骏马，西市买鞍鞯，南市买辔头，北市买长鞭。旦辞爷娘去，暮宿黄河边。</p>

<p class="Page">旦辞黄河去，暮至黑山头，不闻爷娘唤女声，但闻燕山胡骑鸣啾啾。</p>

<p>万里赴戎机，关山度若飞。朔气传金柝，寒光照铁衣。将军百战死，壮士十年归</p>

<p class="Page">归来见天子，天子坐明堂。策勋十二转，赏赐百千强。可汗问所欲，木兰不用尚书郎，愿驰千里足，送儿还故乡。</p>

<p class="Page">爷娘闻女来，出郭相扶将；阿姊闻妹来，当户理红妆；小弟闻姊来，磨刀霍霍向猪羊。</p>

<p class="Page">开我东阁门，坐我西阁床，脱我战时袍，著我旧时裳。 当窗理云鬓，对镜帖花黄。</p>

<p class="Page">出门看火伴，火伴皆惊忙：同行十二年，不知木兰是女郎。</p>

<p class="Page">雄兔脚扑朔，雌兔眼迷离；双兔傍地走，安能辨我是雄雌？</p>
</body>
</html>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/96724

使用HTML+CSS完成一个简单的立体字效果_前端 文字有立体感

使用HTML+CSS完成一个简单的立体字效果*

此处用木兰辞来举列子

来看看效果

使用HTML+CSS完成一个简单的立体字效果_前端文字有立体感

*使用HTML+CSS完成一个简单的立体字效果**