<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
<style>
body {
background-color: red;
}
div {
width: 600px;
height: 300px;
text-align: center;
line-height: 300px;
font-size: 80px;
font-weight: 900;
color: red; /*文字颜色必须和背景同色*/
}
.tu {
/* text-shadow: 右下 +, 左上-;*/
/*text-shadow: 1px 1px 1px #000,-1px -1px 1px #fff;*/
/*text-shadow: 1px 1px 1px #000,-1px -1px 1px #fff;*/
text-shadow:-2px -2px 2px #fff,2px 2px 2px #000;
/*#000是黑色 #fff是白色 凸上白下黑 凹 上黑下白*/
/*text-shadow :向右移动 向下移动 模糊的距离 颜色*/
}
.ao {
/*text-shadow: 1px 1px 1px #fff,-1px -1px 1px #000;*/
text-shadow:-2px -2px 2px #000,2px 2px 2px #fff;
}
</style>
</head>
<body>
<div class="tu">我是凸起来</div>
<div class="ao">我是凹下去</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
<style>
body {
background-color: #efefef;
}
.box {
width: 300px;
height: 200px;
margin: 100px auto;
background-color: white;
font-size: 50px;
line-height: 200px;
text-align: center;
/**/
text-shadow: 1px 1px 1px red;
box-shadow: 40px 30px 50px 0px rgba(0,0,0,0.2) inset;
}
.box:hover {
box-shadow: 40px 30px 50px 0px rgba(0,0,0,0.2) inset;
/*默认是 外部阴影outset 变成内部阴影要在后面加上inset
内部阴影和外部阴影只能有一个*/
}
</style>
</head>
<body>
<div class="box">
文字阴影
</div>
</body>
</html>