- <b>知识点：box-shadow、outline
- 技巧1.运用box-shadow打造多重边框的效果 2.运用outline打造两层（只能是两层）边框效果 。</b>
一、box-shadow
<b>box-shadow: h-shadow v-shadow blur spread color inset;</b>
分别代表：水平阴影位置（允许负值）、垂直阴影位置（允许负值）、模糊距离、阴影的尺寸、阴影的颜色、将外部阴影 (outset) 改为内部阴影。
这几个值可以全部写上，也可以写部分。
对于<b>inset</b>，以前用的少，现在说明一下：
举个例子：
- <b>不使用inset的情况</b>
body{
margin: 0;
padding:0;
}
div{
width:300px;
height:100px;
background-color:#ff9900;
box-shadow: 0 0 0 10px #888888 ,
0 0 0 20px deeppink ,
0 2px 5px 15px rgba(0,0,0,.6) ;
word-wrap: break-word;
}
效果：
Paste_Image.png
注意：此处我把间距都初始化成了0，所以div左侧、上侧的阴影是看不到的。因为投影和边框的原理不太一样，它不会影响布局。这时，想要完全显示阴影效果，需要给div一个margin值。
- <b>使用inset的情况</b>
div{
width:300px;
height:100px;
background-color:#ff9900;
box-shadow: 0 0 0 10px #888888 inset,
0 0 0 20px deeppink inset,
0 2px 5px 15px rgba(0,0,0,.6) inset;
word-wrap: break-word;
}
效果：
Paste_Image.png
可见，使用inset（内嵌）投影嵌入div内容里面了，占据了div的内容尺寸。
二、 outline（描边）
<b>outline：outline-color outline-style outline-width inherit；</b>
分别代表：边框颜色、边框样式、边框宽度、继承。
一般情况写前三个值，例如outline:#00FF00 dotted thick;
对于outline-style，有以下值：none、dotted（点）、dashed（虚线）、solid、double（双线）、groove（3D 凹槽）、ridge（3D 凸槽）、inset（3D 凹边）、outset（3D 凸边）、inherit。一般用到前五个。
