知识储备
1.box-shadow: 向框添加一个或多个阴影
参数：水平阴影的位置 垂直阴影的位置 模糊距离 阴影的尺寸 阴影的颜色 内部/外部
Tips: 没有实体区域，无法点击
2.outline: 是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
参数：
outline-color 规定边框的颜色
outline-style 规定边框的样式
outline-width 规定边框的宽度
inherit 规定应该从父元素继承 outline 属性的设置。
Tips: 没有实体区域，无法点击
测试例子
1.用box-shadow/outline实现多边框
html
<div class="div1"></div>
css
box-shadow解法
width: 200px;
height: 100px;
background-color: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;
out-line解法
width: 200px;
height: 100px;
background-color: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;
多边框DIV
两者的区别：1.box-shadow可以绘制多个边框，而outline只能绘制一个边框
2.box-shadow遵守圆角特性，而outline遵守圆角特性
2.圆角特性测试
css
box-shadow解法
width: 200px;
height: 100px;
border-radius:5px; //!圆角测试
background-color: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;
out-line解法
width: 200px;
height: 100px;
border-radius:5px; //!圆角测试
background-color: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;
结果：
box-shadow
box-shadow遵守圆角特性
outline
outline不遵守圆角特性
小技巧：利用outline的直角特性制作一个裁缝布的效果
css
width: 200px;
height: 100px;
background-color: #655;
border-radius: 5px;
outline: 3px dashed #fff;
outline-offset: -15px; //！改变outline的位置
outline的直角
思考
在文章最开始提到了实体区域的问题，如何解决布局和点击范围？
1.将阴影设置为inset ? 给足够的paddding ?
css
width: 200px;
height: 100px;
border-radius: 5px;
background-color: yellowgreen;
box-shadow: 0 0 0 5px deeppink inset, 0 0 0 15px #655 inset;
padding: 15px;
测试结果：
内边框没有圆角
我们可以看到内边框和content区域没有了圆角，但确实可以点击
先写到这里，看看有没有更好的解决办法？！
