css3盒子阴影
昨天，没有更新，因为调换班级的原因。可能我直接把源码放上去，对于有些自学的同学看到可能并不好用，但是可能目前还没有更好的方法，我把整理过后没有注释的代码放到了我的印象笔记里面，方便复习。以后会改将方法，希望对新人有所帮助。
<!DOCTYPE html>
<html>
<head>
<title>盒子阴影</title>
<style type="text/css">
.a{
width: 100px;
height: 100px;
margin: 100px auto;
/*box-shadow 第一个参数代表x轴的偏移量
第二个参数代表y轴的偏移量(可以为负值代表向反方向偏移)
第三个参数是模糊度
第四个参数的发散度
第五个是颜色*/
box-shadow: 0 0 20px 50px red;
}
.b{
width: 100px;
height: 100px;
margin: 100px auto;
/* box-shadow多阴影 直接在设定的阴影后写逗号隔开就可以写多个了*/
box-shadow:
0 0 10px 10px red,
0 0 10px 20px green,
0 0 10px 30px blue,
0 0 0 40px pink;
}
.c{
width: 100px;
height: 100px;
margin: 100px auto;
border: solid 1px darkgray;
/*box-shadow还有第六个属性inset 可以设定内阴影 box-shadow的默认阴影是外阴影*/
box-shadow: 5px 5px 10px #999 inset,
5px 5px 20px red inset;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</body>
</html>
