给你的元素加个边框吧！多重边框、圆角边框、多重圆角边框统统都可以！
边框是我们做网页时经常用到的属性，它可以给你的网页增加很多美观性，今天我们就来好好说一说怎么用更多的方式增加边框。
一.多重边框
一个边框很简单，就不说了。border嘛对不对。
好，那么，二重边框 呢？比如说这样：
啊，你肯定要说，这还不简单，再加一个div不就行了...
<div>
<div></div>
</div>
nonono，记住，今天我们所有的边框，都是在一个div下完成的！对的，就是这样
<body> <div> </div> </body>
就这样，再也没有别的了……
这怎么办呢？border好像只能设置一个啊...
可能有的童鞋已经想到了，outline啊！对啊，outline的确可以：
border: 10px solid yellow;
outline: red solid 10px;
那就说下outline呗，outline就是描边，在外面画一条线，跟border看起来没差，不过要注意的是顺序是outline：color style width ，而且浏览器的支持性也很好。
那么，继续？比如，三重边框？？？
这..好像有点难..
能不能再加一个outline？比如这样？
border: 10px solid yellow;
outline: red solid 10px;
outline: blue solid 10px;
试一试，
哎这个这个。。怎么覆盖掉了。。看来outline也不行啊。。
哎等等，其实还真的行！
可能有人知道只是没想起来，outline还有个属性叫做outline-offset，这个干嘛用的呢？就是设置它的扩张收缩。可以给它指定一个10px，那么它就往外扩张10px，更有趣的是，它还可以被指定一个负值，比如-10px，那如果在这个例子里给它-10px会怎样？没错，它会覆盖在border上，当我们给border一个合适的宽度时，三重边框就出现了！
嗯看起来还不错，但是好像有点问题啊，你这个，怎么跟上面那张不太一样呢？..
这就是outline的局限性了，它的确做到了三重边框，但是颜色却无法像上面那样，那上面那个黄红蓝怎么做的？诶你是不是骗我呢？你是不是就是用了两个div？？
当然不会，骗你们干嘛还写这篇博文啊！
好让我们会见第三位嘉宾：box-shadow！
好的大家都知道这个属性，心里瞬间就明亮了对不对，哎我知道怎么做了：
border: 30px solid yellow;
outline: red solid 10px;
box-shadow: 0 0 30px blue;
就是这样！前两个值是x、y轴的偏移，第三个值是模糊半径，然后是颜色，看起来好像可以，来我们试试：
这。。怎么没有啊。。难道是30px太小了？那给个100px！
好了这下的确有了，但完全不是边框啊！根本不是我们想要的样式，这可咋办？
其实box-shadow还有第五个值，box-shadow：0 0 0 0 #,就是在模糊和颜色之间加了一个值。
这个值是干嘛用的呢？其实跟outline差不多，可以让它扩张，这个扩张和模糊不一样，它是实打实的！好，那么我们的代码就出来了：
border: 10px solid yellow;
outline: red solid 10px;
box-shadow: 0 0 0 20px blue;
效果呢？就是上上上面那张图。细心的小伙伴会发现，你这个border：10px，outline：10px，box-shadow怎么就20px呢？这个问题很有意思，当我们把outline去掉的时候，你就会发现border还是10px，但shadow已经变成了20px，这说明了什么？
shadow是从border外开始的，而且会被outline挡住。那如果去掉border呢？没错，outline是10px，shadow也是10px。这里就不放图了。
还有更细心的小伙伴发现，你刚刚说这个box-shadow跟outline差不多，但是你只说了它可以向外扩张，那么它能不能收缩呢？这个嘛，就留给大家去试试了。
好了，知道了box-shadow我们就可以做出三重边框了，那么来试试四重？
哈哈，不要懵，要知道box-shadow是可以设置多重值的，就像这样：
box-shadow: 0 0 0 20px blue, 0 0 0 30px green;
好了，那么像这样，什么五重六重一百重统统不在话下，不过要注意的一点是扩张的值要越来越大，因为它是会被挡住的。
二.圆角边框
好了，我们的多重边框已经说完了，现在该说圆角边框了。
其实大多数时候我们用边框的时候，都是用圆角的，原因嘛，当然是因为圆角的更圆滑美观一些。
border-radius，值可以用px，也可以用百分比，当值≥50%时，就可以得到一个圆，当然这是在一个正方形的前提下，长方形呢就是椭圆。
一重圆角边框很简单，照例不说了。直接说二重圆角边框：
啊这个很简单嘛，直接给个border-radius不就行了：
border: 10px solid yellow;
border-radius: 50%;
outline: red solid 10px;
看起来好像可以，不过试一试就会发现：
这什么鬼！完全不对头啊！..这里就要说一说outline的不足了，它不会随着边框一起“变弯”，笔直笔直的有没有！？
所以要实现这个，必须得用box-shadow，它就会紧贴着border，你直我也直，你弯我也弯！
就像这样：
代码就是：
border: 10px solid yellow;
border-radius: 50%;
box-shadow: 0 0 0 10px red,0 0 0 20px blue;
就算有很多重也没问题！是不是要比outline好用很多！想要什么色就要什么色，想怎么弯就怎么弯！
好了讲到这里差不多就完了，有人可能会说，你这设置这么多边框有啥用啊？看着也不怎么好看……其实好不好看嘛，稍微变下样式就行了。比如说晚上街上那一闪一闪的LED招牌，给box-shadow加个动画改下样式完全可以做出那种效果啊！没有做不到只有想不到嘛！
最后再说一点...
三.一点细节
当我们给元素添加边框的时候，边框都是有一定宽度的，那么这个宽度占了一定的位置，就有可能影响到布局，所以有时候还是得留心一下的。
border是占据空间的，比如说原本两个元素之间的距离是10px，当你给一个元素加10px的border时，他们的距离就会变成20px，因此有时候加了border，就会影响到页面的布局。
而outline和box-shadow不占据空间，也就是不会影响布局，加了10px后元素间距离仍为10px。
这个大家多用用就会清楚了。
而且，box-shadow要IE9以上才支持。
好了，罗嗦了半天，终于是说完了。有什么错误的话，欢迎大家指正，有什么问题也可以留言，大家一起学习一起进步！
