技巧2： 多重边框

前面的话

怎样给一个盒子添加多个边框？很多人可能是这样解决的：用多个的元素来模拟多重边框。这样确实可以解决问题，但是我们有更好的解决方法。

box-shadow方案

css3的新增属性，大多数人都用过这个属性来生成阴影。那如何使用box-shadow属性给元素添加多重边框呢？

box-shadow用法

先来看看w3c对box-shadow属性的介绍：

[定义和用法]

box-shadow 属性向框添加一个或多个阴影。

[语法]

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

[属性值描述]

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。
inset	可选。将外部阴影 (outset) 改为内部阴影

实例

了解这个属性的用法之后，我们来看一个例子：

div {
            width: 100px;
            height: 100px;
            margin: 100px auto;
            background: yellowgreen;
            box-shadow: 0 0 0 10px #655 ;
     } 

得到的结果是这样的：

这里将box-shadow属性的值设置为：两个零偏移量和一个零模糊值加上一个正值的阴影尺寸10px,得到的阴影就像一道实线的边框。

你可能你会觉得这有什么，直接使用border属性也可以生成一个完全一样的边框效果。

逗号分隔

下面就要说一说box-shadow的好处，它支持逗号分隔语法，我们可以创建任意数量的阴影。

因此我们可以很轻松的在上面的实例中再添加一道deeppink颜色的边框。

   box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;

可以看到，在颜色为#655的边框外又增加一道5px颜色为deeppink的边框。

我们可以发现box-shadow是层层叠加的，第一层投影位于最顶层，以此类推。因此，你需要按此规律调整扩张的阴影半径。

如果你愿意，可以在这些边框的底下再加上一层常规的阴影：

    background: yellowgreen;
    box-shadow: 0 0 0 10px #655,
                0 0 0 15px deeppink,
                0 2px 5px 15px rgba(0,0,0,.6);

与border的区别

• border属性没有办法设置多重边框
• box-shadow不会影响布局，也不会受到box-sizing属性的影响。不过我们还是可以通过inset或者outset属性值(阴影是内嵌还是外扩)来额外模拟出边框所需要占据的空间。
• 上述方法所创建的“假边框”出现在元素的外圈，它们并不会响应鼠标事件，比如悬停或点击。

outline方案

outline用法

先看看w3c对outline属性的介绍

[定义与用法]

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

注意： 轮廓线不会占据空间，也不一定是矩形。

[属性描述]

值	描述
outline-color	规定边框的颜色。
outline-style	规定边框的样式。
outline-width	规定边框的宽度。
inherit	规定应该从父元素继承 outline 属性的设置。

如果不设置其中的某个值，也不会出问题，比如 outline:solid #ff0000; 也是允许的。

了解属性用法后可以看出，outline属性只适合两层边框的情景，先设置一层常规边框，再加上outline属性来产生外层的边框。这种方法的优点在于边框样式十分灵活，不想box-shdow只能模拟实线边框。

实例

看一个例子：

 div {
            width: 100px;
            height: 100px;
            background: yellow;
            border: 10px solid #655;
            outline: 5px  solid deeppink;
        }

改变边框样式为dashed,外边框变为虚线:

   outline: 5px  dashed deeppink;

使用负值的outline-offset后，可以使得描边出现在元素内部:

outline-offset: -20px;

总结

上面介绍的两种方法各有个的好处.

• 如果想给元素添加多层边框使用box-shadow来模拟实现
• 如果只需要两层边框，使用outline属性来描边更好。