《CSS揭秘》技巧二 多重边框

• 知识点：box-shadow、outline
• 技巧1.运用box-shadow打造多重边框的效果 2.运用outline打造两层（只能是两层）边框效果 。

一、box-shadow

box-shadow: h-shadow v-shadow blur spread color inset;
分别代表：水平阴影位置（允许负值）、垂直阴影位置（允许负值）、模糊距离、阴影的尺寸、阴影的颜色、将外部阴影 (outset) 改为内部阴影。

这几个值可以全部写上，也可以写部分。

对于inset，以前用的少，现在说明一下：
举个例子：

1. 不使用inset的情况

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值。

2. 使用inset的情况

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（描边）

outline：outline-color outline-style outline-width inherit；
分别代表：边框颜色、边框样式、边框宽度、继承。

一般情况写前三个值，例如outline:#00FF00 dotted thick;

对于outline-style，有以下值：none、dotted（点）、dashed（虚线）、solid、double（双线）、groove（3D 凹槽）、ridge（3D 凸槽）、inset（3D 凹边）、outset（3D 凸边）、inherit。一般用到前五个。