多重边框
多重边框:
1、可以使用box-shadow来编写:例如
box-shadow: h-shadow v-shadow blur spread color inset/outset;
其中: h-shadow ------ 水平阴影位置 v-shadow ------ 垂直阴影位置 blur ------ 模糊的距离 spread --------- 阴影的尺寸
<div class="main"></div>
.main {
width: 200px;
height: 200px;
margin: 50px auto;
background:yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;
}
如果给与一定的blur值会是什么样的效果呢?
.main {
width: 200px;
height: 200px;
margin: 50px auto;
background:yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 15px 15px deeppink;
}
那么将会是这样的:
2、使用outline的方式写:
.main {
width: 200px;
height: 200px;
margin: 50px auto;
background:yellowgreen;
border: 10px solid #655;
outline: 15px solid deeppink;
}
使用outline的好处就是边框可以是虚线的
比如:
.main {
width: 200px;
height: 200px;
margin: 50px auto;
background: yellowgreen;
border: 10px solid #655;
outline: 15px dashed deeppink;
}
甚至还可以用outline-offset属性来控制边框跟元素之间的间距,可以是负值也可以是正值;
使用outline+border的方式只能设置两重边框的情况,并且border-radius跟outline并不会贴合
.main {
width: 200px;
height: 200px;
margin: 50px auto;
background: yellowgreen;
border: 10px solid #655;
outline: 15px dashed deeppink;
border-radius: 72px;
}
box-shadow的方式,可以设置多重边框:
.main {
width: 200px;
height: 200px;
margin: 50px auto;
background:yellowgreen;
box-shadow: 0 0 0 5px #655, 0 0 0 10px darkcyan, 0 0 0 15px aqua, 0 0 0 20px gold;
}