CSS学习（七）-边框阴影效果（下）
一、理论：
1.阴影层级：边框>内阴影>背景图片>背景色>外阴影
2.多层阴影：每层之间用逗号隔开
3.box-shadow兼容性：
a.在现代浏览器新版本无须加前缀，但旧版本需要加
b.ie8以下需要用ie滤镜来模拟实现
c.box-shadow具有多个参数可选，可制作出圆润的阴影效果
二、实践：
1.阴影层级：边框>内阴影>背景图片>背景色>外阴影
2.多层阴影：每层之间用逗号隔开
3.box-shadow兼容性：
a.在现代浏览器新版本无须加前缀，但旧版本需要加
b.ie8以下需要用ie滤镜来模拟实现
c.box-shadow具有多个参数可选，可制作出圆润的阴影效果
二、实践：
1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box-shadow{
width: 200px;
height: 100px;
border:1px solid #cccccc;
border-radius: 5px;
box-shadow: inset 3px 3px 10px #06c;
}
img {
width: 200px;
height: 100px;
border: 1px solid #cccccc;
border-radius: 5px;
box-shadow: inset 3px 3px 10px #06c;
}
</style>
</head>
<body>
<div class="box-shadow"></div>
<img src = "images/tabs-image.jpg" alt="" width="200" />
</body>
</html>2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box-shadow{
width: 200px;
height: 100px;
border:1px solid #0055cc;
border-radius: 5px;
box-shadow: -5px 0 5px red,
0 5px 5px blue,
5px 0 5px green,
0 -5px 5px orange;
}
.box-shadow1{
border:50px;
width: 200px;
height: 100px;
border:1px solid #0055cc;
border-radius: 5px;
box-shadow: 0 0 0 1px red,
0 0 0 5px blue,
0 0 0 8px green,
0 0 0 12px yellow,
0 0 0 16px #662817,
0 0 0 20px #062817,
0 0 0 24px #209359;
}
.box-shadow2{
width: 200px;
height: 100px;
border:1px solid #0055cc;
border-radius: 5px;
box-shadow:
0 0 0 24px #209359.
0 0 0 1px red,
0 0 0 5px blue,
0 0 0 8px green,
0 0 0 12px yellow,
0 0 0 16px #662817,
0 0 0 20px #062817;
}
</style>
</head>
<body>
<div class="box-shadow" >1</div>
<div class="box-shadow1" >2</div>
<div class="box-shadow2" >3</div>
</body>
</html>3.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#formWrapper{
width: 250px;
padding: 0px;
margin: 20px;
overflow: hidden;
border-width: 1px;
border-style: solid;
border-color: #6bb2ff #062817 #189356 #291153;
box-shadow: 0 3px 3px rgba(255,255,255.1),
0 3px 0 #bbb ,
0 4px 0 #aaa,
0 5px 5px #283;
border-radius: 10px;
background-color: #f6f6f6 #bababa #aaa #bababa;
box-shadow: 0 3px 3px rgba(255,232,123,.1),
0 3px 0 #bbb ,
0 4px 0 #123589,
0 5px 5px #183929;
border-radius: 10px;
background-color: #298693;
background-image: -webkit-gradient(linear,left top,left bottom,from(#a6f5f3),to(#196932));
background-image: -webkit-gradient(top,#a6f821,#f98263);
background-image: -moz-gradient(top,#a6f821,#f98263);
background-image: -ms-gradient(top,#a6f821,#f98263);
background-image: -o-gradient(top,#a6f821,#f98263);
background-image: linear-gradient(top,#31b231,#103863);
border-radius:3px;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset,0 1px 0 #fff;
}
#formWrapper .btn:hover,
#formWrapper .btn:focus{
background-color: #31b2c6;
background-image: -webkit-gradient(linear,left top,left bottom,from(#0483a0),to(#31b2c3));
background-image: -webkit-gradient(top,#0483a0,#31b2c3);
background-image: -moz-gradient(top,#0483a0,#31b2c3);
background-image: -ms-gradient(top,#0483a0,#31b2c3);
background-image: -o-gradient(top,#0483a0,#31b2c3);
background-image: linear-gradient(top,#0483a0,#31b2c3);
}
#formWrapper .btn:active{
outline: 0;
box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset;
}
#formWrapper::-moz-focus-inner{
border:0;
}
</style>
</head>
<body>
<form id = "formWrapper">
<div class = "formFiled clearfix">
<input type = "text" required="" placeholder="Search for Css3 ..." class="search">
<input type = "submit" class="btn submit" value = "go">
</div>
</form>
</body>
</html>