CSS实现多重边框和内凹圆角

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实现内凹圆角的思路【截图来自慕课网】：