SOURCE

console 命令行工具 X clear

                    
>
console
<div class="menu-list">
 <div class="menu">应用</div>
 <div class="menu">订单</div>
 <div class="menu">设置</div>
 <div class="menu active">官网</div>
 <div class="menu">关于我们</div>
</div>

<div class="demo">
 <div class="tab">
 <div class="shadow-box">
 <div class="shadow"></div>
 </div> </div> <div class="corner shadow-box">
 <div class="shadow shadow-inset"></div>
 </div> <div class="main">
 <div class="shadow-box">
 <div class="shadow"></div>
 </div> <div class="item">item a</div>
 <div class="item">item b</div>
 <div class="item">item c</div>
 <div class="item">item d</div>
 <div class="item">item e</div>
 <div class="item">item f</div>
 <div class="item">item g</div>


 <div class="box"></div>
 .menu-list {padding-left:1em;width:200px;color:#FFF;background-color:#369;}
 .menu-list .menu {position:relative;line-height:2em;text-align:center;}
 .menu-list .menu.active {color:#369;border-top-left-radius:1em;border-bottom-left-radius:1em;background-color:#FFF;}
 .menu-list .menu.active:before {content:'';position:absolute;height:1em;width:1em;right:0;top:-1em;border-bottom-right-radius:1em;box-shadow:1em 1em 0 1em #FFF;}
 .menu-list .menu.active:after {content:'';position:absolute;height:1em;width:1em;right:0;bottom:-1em;border-top-right-radius:1em;box-shadow:1em -1em 0 1em #FFF;}


 body {background:url('https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1467185356,2616406287&fm=26&gp=0.jpg');}
    .shadow-box {position:absolute;overflow:hidden;}
    .shadow-box .shadow {position:absolute;top:10px;bottom:10px;left:10px;right:10px;border-radius:1em;box-shadow:0 0 10px 0 #000;}
    .shadow-box .shadow-inset {top:0;bottom:0;left:0;right:0;border-radius:1em;box-shadow:0 0 10px 0 #000 inset;}
    .demo {position:absolute;margin-left:50px;}
    .demo .tab {position:absolute;top:10px;left:-50px;width:50px;height:100px;overflow:hidden;}
    .demo .tab .shadow-box {width:50px;height:100px;}
    .demo .tab .shadow-box .shadow {right:-20px;}
    .demo .corner {position:absolute;top:100px;left:0;width:20px;height:20px;}
    .demo .corner .shadow {left:-20px;bottom:-20px;}
    .demo .main {position:relative;padding-left:30px;height:80vh;}
    .demo .main .shadow-box {top:120px;bottom:0;left:10px;width:30px;}
    .demo .main .shadow-box .shadow {top:-10px;bottom:-10px;right:-10px;border-radius:0;}



:root {    --r: 2em; } 
.box {    
   position: relative;  
   overflow: hidden;     
   margin: .25em auto;    
   min-width: 15em;    
   max-width: 15em;    
   min-height: 10em;    
   border-radius: 1em;
    &::before {        
        content: '';        
        position: absolute;
        padding: var(--r);       
        margin: calc(var(--r) * (-1));     
        border-radius: 50%;        
        box-shadow: 0 0 0 300px rgba(#95a, .75); 
    } 
}