box-shadow和outline的多重边框之旅
作者：互联网
结论：
1.box-shadow和outline都不占据空间，border占据空间。
2.box-shadow可以设置多重边框，而outline只能设置两层。
3.outline可以设置实线虚线等样式。
4.经测试box-shadow和outline都会贴合元素变成圆角。
代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>边框</title>
<style type="text/css">
body{
background-color: pink;
}
div{
width: 12%;
line-height: 100px;
margin-top: 50px;
margin-left: 20px;
text-align: center;
border-radius: 20px;
}
/* 透明边框 */
#transparent{
background: white;
border:10px solid hsla(0,0%,100%,.5);
background-clip: padding-box;
}
/* 多重边框 */
#box-shadow{
background: white;
box-shadow: 0 0 0 10px #655,
0 0 0 15px deeppink,
0 2px 5px 15px rgba(0,0,0,.6);
}
#outline{
background: white;
border: 10px solid #655;
outline: 5px dashed deeppink;
/* outline-offset: 10px; */
}
</style>
</head>
<body>
<div id="transparent">实现透明边框</div>
<div id="box-shadow">通过阴影实现多重边框</div>
<div id="outline">通过outline实现多重边框</div>
</body>
</html>
View Code
效果：
标签：box,outline,边框,background,shadow,border 来源： https://www.cnblogs.com/sevenkiki/p/15831339.html