CSS实现多重边框
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>CSS实现多重边框</title>
<style>
div {
width: 100px;
height: 150px;
margin: 40px auto;
text-align: center;
background: lightblue;
border: 20px solid cornflowerblue;
}
#box1 {
outline: 5px solid chocolate;
outline-offset: -10px; /*outline描边模拟的边框会在真正边框的里面，但是描边没有办法贴合圆角的位置*/
}
#box2 {
/*盒子阴影实现双重边框，第四个参数表示投影扩张的像素，","分隔绘制多个投影*/
-webkit-box-shadow: 0 0 0 5px brown,
0 0 0 10px yellow,
0 0 0 15px green;
-moz-box-shadow: 0 0 0 5px brown,
0 0 0 10px yellow,
0 0 0 15px green;
box-shadow: 0 0 0 5px brown,
0 0 0 10px yellow,
0 0 0 15px green;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
</style>
</head>
<body> <div id="box1">box1</div>
<div id="box2">box2</div>
<h1>box1和box2的绘制方式都不会影响布局</h1> </body>
</html>
CSS实现内凹圆角的思路【截图来自慕课网】：