1、盒子阴影
虽然值很多,但是大多不常用或者用不到
常用语法:
box-shadow: 1px 2px 3px 4px rgb(0,0,0,.2);
前四个值设置阴影大小,顺序和边框一样(上右下左),rgba设置阴影颜色和透明度
<!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: 200px;
height: 400px;
background-color: pink;
/* css3属性 我们建议写在其他属性后面 */
box-shadow: 1px 5px 16px 2px rgba(0,0,0,.2);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2、文字阴影
语法:
text-shadow: h-shadow v-shadow blur color;
水平方向,左负右正
垂直方向,上负下正
<!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>
h2 {
text-shadow: 7px 12px 7px rgba(0,0,0,.2);
}
</style>
</head>
<body>
<h2>文字阴影</h2>
</body>
</html>