box-shadow的参数有六个：X轴偏移、Y轴偏移、阴影模糊半径、阴影扩展半径、阴影颜色、阴影类型。
x-offset：X轴偏移
阴影水平偏移量，其值可以是正负值，如果是正值则阴影在对象的右边，为负值则在左边。
y-offset：Y轴偏移
阴影上下偏移量，其值也可以为正负值，如果是正值，则阴影在对象的底部，为负值则在顶部。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{width:400px; height:400px; border: red solid 2px; margin:auto; box-shadow:20px 20px;}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
阴影模糊半径
此参数可选，为0时阴影不具有模糊效果，其值越大阴影边缘也就越模糊
<style>
.box{width:400px; height:400px; border: red solid 2px; margin:auto; box-shadow:20px 20px 30px;}
</style>
阴影扩展半径
此参数可选，其值为正值时，整个阴影面积都延展扩大，为负值时则缩小
<style>
.box{width:400px; height:400px; border: red solid 2px; margin:auto; box-shadow:20px 20px 30px 20px;}
</style>
阴影颜色
此参数可选，如果不设定颜色，浏览器会取默认色，但各个浏览器默认取色不一样
<style>
.box{width:400px; height:400px; border: red solid 2px; margin:auto; box-shadow:20px 20px 30px 20px green;}
</style>
阴影类型
此参数可选，如不设值，默认投影方式是外投影，如取其唯一值“inset”，则投影为内投影
<style>
.box{width:400px; height:400px; border: red solid 2px; margin:auto; box-shadow:20px 20px 30px 20px green inset;}
</style>
9004
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
