一 凹凸文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <title>Document</title> -->
<style>
.fa {
font-size: 120px;
background-color: rgb(33, 177, 104);
color: rgb(33, 177, 104);
font-weight: 700;
}
.fa .to {
/* 水平阴影位置 垂直阴影位置 模糊距离 阴影颜色 */
text-shadow: -1px -1px 2px #fff, 1px 1px 2px #000;
}
.fa .ao {
text-shadow: -1px -1px 2px #000, 1px 1px 2px #fff;
}
</style>
</head>
<body>
<div class="fa">
<div class="to">我是凸起来的文字</div>
<div class="ao">我是凹进去的文字</d>
</div>
<input type="color">
</body>
</html>
二 空心文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <title>Document</title> -->
<style>
span {
font-size: 120px;
font-weight: 700;
/* 文字的填充色 --- 需要和背景颜色一样 */
-webkit-text-fill-color: #fff;
/* 文字的描边色 */
-webkit-text-stroke-color: red;
/* 文字的描边宽度 */
-webkit-text-stroke-width: 1px;
}
</style>
</head>
<body>
<span>空心文字</span>
</body>
</html>
三 精灵图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <title>Document</title> -->
<style>
div {
width: 80px;
height: 60px;
background-image: url('./img/sprit.png');
background-color: rgba(20, 30, 40, .3);
background-position: center 0;
background-repeat: no-repeat;
}
.box2 {
background-position: center -88px;
}
</style>
</head>
<body>
<!-- 精灵图：页面上会用到很多小图标，把这些小图标放在一张大图片上显示，需要用到的时候通过背景的位置来展示每一个小图标 目的在于优化性能 -->
<div class="box1"></div>
<br>
<div class="box2"></div>
</body>
</html>
