今天学习了关于css3的盒子阴影效果的box-shadow属性:
box-shadow的主要属性值有:
box-shadow:水平位移px 竖直位移px 模糊程度px 阴影颜色;
代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<style>
div{
200px;
height: 100px;
margin: 100px 20px;
background: #ccc;
float: left;
}
div:nth-child(1){box-shadow:-10px -10px;}
div:nth-child(2){box-shadow:10px -10px}
div:nth-child(3){box-shadow:10px -10px 10px}
div:nth-child(4){box-shadow:10px -10px 10px red}
</style>
</head>
<body>
<div>
left-top
</div>
<div>
left-top
</div>
<div>
rouhe
</div>
<div>
color
</div>
</body>
</html>