<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3阴影</title>
</head>
<!--
对象阴影【box-shadow】
语法：box-shadow:投影方式 x轴偏移量 y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色；
可以使用一个或多个投影，如果使用多个投影时必须用逗号，分开。
另外，还可以通过inset来设置对象的内阴影
背景颜色线性渐变【linear-gradient】
语法：
background:linear-gradient(起点，起点颜色，过度颜色【可选】，终点颜色)；
起点：top是从上到下，left是从左到右。如果定义成left top，那就是从左上角到右下角
过渡色：可以插入多个，表示多种颜色的渐变
-->
<style>
.box-shadow{
width: 1000px;
margin:0 auto;
text-align: center
}
.box-shadow:after{
clear: both;
display: block;
overflow: hidden;
content: " ";
}
.box-shadow p{
width: 100px;
height: 100px;
float: left;
border:1px #999 solid;
line-height: 100px;
background-color: #f9f9f9;
margin-right: 100px;
font-size: 20px;
}
/* 外阴影 */
.box-shadow p:first-child{
/* x轴偏移量 y轴偏移量 模糊半径 扩展半径 阴影颜色（0.3t透明度） */
box-shadow: 5px 5px 3px 2px rgba(0,0,0, .3);
}
/* 内阴影 */
.box-shadow p:last-child{
/* x轴偏移量 y轴偏移量 模糊半径 扩展半径 阴影颜色（0.3t透明度） */
box-shadow:inset 5px 5px 3px 2px rgba(0,0,0, .3);
}
</style>
<body>
<div class="box-shadow">
<p>外阴影</p>
<p>内阴影</p>
</div>
</body>
</html>
