2-2 多边框（属性outline/box-shdow）

---

知识储备

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区域没有了圆角，但确实可以点击
先写到这里，看看有没有更好的解决办法？！