CSS应用：阴影和轮廓

CSS中使用box-shadow属性可以为元素添加阴影效果，阴影的效果有些类似元素的边框，但存在一些差别。outline属性则可以为元素添加轮廓，轮廓主要用于吸引用户的注意。

阴影和轮廓介绍

阴影

使用box-shadow属性可以为元素添加阴影效果，下面是使用box-shadow的一个例子：

阴影效果

background: #cd6600;

box-shadow: 0 2px 5px 15px #cdcd00;

box-shadow语法：

    box-shadow: h-shadow v-shadow blur spread color inset;

关键字	是否必须	作用	值
hoffset	是	阴影的水平偏移量	长度值，正值代表阴影向右偏移，负值代表阴影向左偏移
voffset	是	阴影的垂直偏移量	长度值，正值代表阴影向下偏移，负值代表阴影向上偏移
blur	否	模糊值	长度值，值越大盒子的边界越模糊，默认值0，边界清晰
spread	否	阴影的延伸半径	长度值，正值代表阴影向盒子各个方向延伸扩大，负值代表阴影沿相反方向缩小
color	否	阴影的颜色	颜色值，如果省略，浏览器会自行选择一个颜色
inset	否	将外部阴影设置为内部阴影	布尔类型

轮廓

轮廓是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

轮廓效果

background: #cd6600;

outline: 15px solid #cdcd00;

outline语法：

    outline: outline-width outline-style outline-color;

关键字	作用	值
outline-color	规定边框的颜色	颜色值
outline-style	规定边框的样式	样式的可选值如下： none：默认，定义无轮廓； dotted：定义点状的轮廓； dashed：定义虚线轮廓； solid：定义实线轮廓； double：定义双线轮廓，双线的宽度等同于outline-width的值； groove：定义3D凹槽轮廓，此效果取决于outline-color值； ridge：定义3D凸槽轮廓，此效果取决于outline-color值； inset：定义3D凹边轮廓，此效果取决于outline-color值； outset：定义3D凸边轮廓，此效果取决于outline-color值； inherit：规定应该从父元素继承轮廓样式的设置。
outline-width	规定边框的宽度	数值，可以使用一下常量： thin：规定细轮廓； medium：默认，规定中等的轮廓； thick：规定粗的轮廓； length：允许您规定轮廓粗细的值； inherit：规定应该从父元素继承轮廓宽度的设置。

阴影和轮廓的运用

创建多重边框效果

使用阴影和轮廓可以为元素创造出多重边框效果，但两者略有不同。

使用阴影

将hoffset、voffset和blur设置为0可以是阴影达到边框的效果：

单边框效果

background: #cd6600;

box-shadow: 0 0 0 10px #cdcd00;

阴影位于border的外部，如果我们为元素添加一个border：

border加阴影效果

background: #cd6600;

box-shadow: 0 0 0 10px #cdcd00;

border: 10px solid #fafafa;

我们还可以为元素添加多个阴影，需要注意每个阴影都是从边框外开始绘制，因此如果你想达到多重边框的效果，你需要将外围的阴影宽度加大：

多重阴影效果

background: #cd6600;

box-shadow: 0 0 0 10px #cdcd00, 0 0 0 15px #cd0001;

border: 10px solid #fafafa;

在拥有了所有这些之后，我们还可以再为元素添加阴影效果：

多重阴影效果

background: #cd6600;

box-shadow: 0 0 0 10px #cdcd00,
       0 0 0 15px #cd0001,
       0 2px 5px 15px #cdcd00;

border: 10px solid #fafafa;

这样我们就有了一个带阴影效果的多重边框效果，但还没有结束，阴影还可以响应border圆角的变化：

圆角边框

background: #cd6600;

box-shadow: 0 0 0 10px #cdcd00,
       0 0 0 15px #cd0001,
       0 2px 5px 15px #cdcd00;

border: 10px solid #fafafa;

border-radius: 6px;

更进一步，我们还可以将阴影放到元素内部，但注意这样会占据元素内部的空间：

inset

background: #cd6600;

box-shadow: 0 0 0 10px #cdcd00 inset,
       0 0 0 15px #cd0001,
       0 2px 5px 15px #cdcd00;

border: 10px solid #fafafa;

border-radius: 6px;

感觉不错吧，但也并不是所有事情都这么美好，阴影有它自生的限制：

• 阴影并不能完全像border一样，它无法影响到布局，不会像border一样占据宽度，因此在使用了阴影后你需要通过padding或margin来调整布局；
• 阴影也不能捕获鼠标事件，例如hover或者click等，如果这一点很重要，你只有为阴影添加inset关键字将阴影放到你的元素内部，但注意你需要添加额外的padding来创造出足够的空间；
• 阴影不能像border一样指定一个类型（solid、dotted等），因此只能作为solid类型的border使用。

使用轮廓

轮廓也可以达到多重边框的效果，但由于不支持多重轮廓，因此使用轮廓仅能为元素添加两个边框。但轮廓可以指定类型，因此使用轮廓也给了我们更多的选择。

下面是一个使用轮廓的例子：

轮廓

background: #cd6600;

border: 10px solid #fafafa;

outline: 15px solid #cd0001;

使用轮廓可以创造出一些特殊的效果，这里运用虚线的轮廓和指定outline-offset属性在元素内部创建一个虚线边框：

虚拟内边框

background: #cdcd00;

border: 10px solid #cdcd00;

border-radius: 6px;

outline: 1px dashed #fff;

outline-offset: -10px;

同样，轮廓也有自己的限制：

• 每个元素仅能有一个轮廓；
• 轮廓不支持border的radius效果，当你在轮廓内部使用radius时，轮廓任然呈现为直角（见下“使用轮廓时采用圆角边框”）；
  
• CSS3规范并没有强制要求轮廓是一个矩形框，虽然大部分浏览器都将其实现为矩形。

使用轮廓时采用圆角边框

圆角

background: #cd6600;

border: 10px solid #cd6600;

border-radius: 20px;

outline: 3px solid #cdcd00;

内圆角

使用边框、阴影和轮廓可以创建出内圆角效果，如下：

内圆角

background: #cd6600;

box-shadow: 0 0 0 5px #cdcd00;

border-radius: 10px;

outline: 10px solid #cdcd00;

下面介绍实现该效果的具体步骤：

1. 首先我们给元素一个圆角边框:
   
   第一步

   border-radius: 10px;

   background: #cd6600;

2. 然后给元素一个轮廓，由于轮廓不会适应圆角的边框而呈现为直角，成为这个效果：
   
   第二步

   border-radius: 10px;

   background: #cd6600;

   outline: 10px solid #cdcd00;

3. 最后，为了填补圆角边框和轮廓之间的空隙，需要在圆角边框和空隙之间增加一个阴影：
   
   第三步

   border-radius: 10px;

   background: #cd6600;

   outline: 10px solid #cdcd00;

   box-shadow: 0 0 0 5px #cdcd00;

这样就达到了我们希望的效果，需要注意的是阴影的宽度应该大于等于radius的一半（其实可以更小一些，有兴趣的同学自己下去算算），且小于等于轮廓的宽度。