多重边框
随着多重背景的兴起，多重边框在平时开发中使用的频率也越来越高了，我们肯定是希望在一个元素的基础上通过css代码去灵活的实现这一需求，接下来我们一起看看实例吧~
box-shadow解决方案
box-shadow在我们平时开发中作为酷炫的边框投影，大家肯定都不陌生，但是很少人知道的是它还接受第四个参数，被称为“”，通过指定正值和负值从而让投影的面积增大或者减少，当我们把投影的两个偏移量以及模糊值都设置成0，同时扩张半径设置成正值，我们就可以得到一条实线边框~ 由于投影是支持逗号分隔的，所以我们可以创建任意数量的投影~ ↓
box {
margin: 40px;
width: 100px;
height: 50px;
background-color: blueviolet;
box-shadow: 0 0 0 10px #655, 0 0 0 15px red;
}
.box:hover{
background-color: hotpink;
}
<div class="box"></div>
通过gif图，我们可以看到box-shadow确实可以满足我们多边框的需求，但是投影的行为和边框完全不同，他不会影响布局，也不会受box-sizing的属性影响，但悬停和点击在投影上也是没有作用的~ 其实我们可以通过
的问题~
.box{
margin: 80px;
width: 300px;
height: 100px;
background-color: chartreuse;
/* 通过设置inset去解决悬停和点击的问题 */
box-shadow: 0 0 0 10px deeppink inset, 0 0 0 25px #655 inset;
}
.box:hover{
background-color: hotpink;
}
设置inset之后，我们就完美的解决了鼠标悬停在投影上产生的问题了~
outline方案
在某些时候我们可能只需要两层边框，我们可以通过设置常规边框，外加属性来产生外层边框，这样会更加的灵活，因为outline产生的边框样式很灵活,可以修改线型，颜色，宽度,同时它不会占据空间，还是一起来看看实例吧~
.multiple-border {
margin: 20px;
width: 180px;
height: 60px;
background-color: chartreuse;
border: 10px solid #665;
/* 可以设置一个虚线的外层边框 */
outline: 5px dashed deeppink;
}
<div class="multiple-border"></div>
其实我们还可以通过
属性来设置描边与元素之间的间距，它支持正值和负值~
边框内圆角
有的时候我们在做一个容器样式的时候，希望可以实现一个内侧是圆角，而边框或者描边仍然是直角，其实我们用两个元素可以很简单并且很灵活的实现这个效果，不过，如果我们要实现纯色的这种圆角效果 我们是可以通过只用到一个元素去实现的，具体我们一起看看实例吧~
通过outline + box-shadow属性
.box{
margin: 20px;
height: 50px;
width: 100px;
background-color: chartreuse;
border-radius: .8em;
outline: .6em solid #655;
padding: 1em;
/* box-shadow是会跟着描边走的 */
box-shadow: 0 0 0 .4em #655;
}
<div class="box"></div>
效果如上，其实我们主要是通过
，而
的的特性来实现这个小的需求，我们可以把描边和投影的颜色设置成两个颜色，从视觉上更好的理解一下这个思想~
看到这个图大家可能会有个疑问，到底多大的投影扩张值可以填补这些空隙呢~ 在这里具体的计算逻辑我就不多赘述了，这边主要是用到之前的勾股定理，这个值需要
，同时要大于
(r表示border-radius),具体的我们可以看《css揭秘》的图解来更好的理解这个逻辑~
image
总结
本章节主要是介绍了关于css边框的一些使用，着重介绍了box-shadow和outline的一些特性，希望大家可以从本篇博客中，有所收获哦~ 😺
