使用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>