本文的CSS效果主要是使用了text-shadow文本阴影效果,text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表,每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。
使用方法
在HTML的head标签中先引入关键的css样式
<style>
body {
background: gray;
}
.class1 {
font-size: 200px;
color: gray;
text-shadow: 3px 3px 2px black,
-3px -3px 2px white;
}
.class2 {
font-size: 200px;
color: gray;
text-shadow: 3px 3px 2px white,
-3px -3px 2px black;
}
</style>
HTML结构
<body>
<div class="demo">
</div>
<h1 class="class1">
我是凸出效果
</h1>
<h1 class="class2">
我是凹陷效果
</h1>
</body>