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

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

此处用木兰辞来举列子

来看看效果

ps:技术不佳大佬们轻喷
使用HTML+CSS完成一个简单的立体字效果_第1张图片

/*标题及其立体效果*/
.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]:   超文本标记语言

"en">

    "UTF-8">
    诗歌
    "icon" href="诗歌.svg">
    "stylesheet" href="poemstyle.css">



"Header">木兰辞

"Header2">【作者】佚名
"Header2">【朝代】南北朝译文

"Page">唧唧复唧唧,木兰当户织。不闻机杼声,惟闻女叹息。问女何所思,问女何所忆。女亦无所思,女亦无所忆。

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

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

"Page">旦辞黄河去,暮至黑山头,不闻爷娘唤女声,但闻燕山胡骑鸣啾啾。

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

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

"Page">爷娘闻女来,出郭相扶将;阿姊闻妹来,当户理红妆;小弟闻姊来,磨刀霍霍向猪羊。

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

"Page">出门看火伴,火伴皆惊忙:同行十二年,不知木兰是女郎。

"Page">雄兔脚扑朔,雌兔眼迷离;双兔傍地走,安能辨我是雄雌?

你可能感兴趣的:(前端学习日记)