向 div 元素添加 box-shadow:
div { box-shadow: 10px 10px 5px #888888; }
语法
box-shadow: h-shadow v-shadow blur spread color inset;
参数依次为:X轴偏移量(水平):可以为负值
Y轴偏移量(垂直):可以为负值
阴影模糊半径,
阴影扩散半径:可以为负值
阴影颜色,
投影方式:有外部阴影 (outset)和内阴影(inset)两种,默认外阴影 inset为其唯一值。
添加多个阴影,用逗号分割,阴影按顺序向后排。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>div阴影</title>
</head>
<style>
#main{
margin-top:200px;
margin-left:200px;
width:200px;
height:200px;
background:blue;
box-shadow:4px -40px 4px 5px red, /**/
40px 4px 4px 5px yellow,
4px 40px 4px 5px green,
-40px 0 4px 5px gray,
80px 80px 4px 5px black;
}
</style>
<body>
<div id="main"></div>
</body>
</html>
效果图