请问如何实现这种外圆角的阴影效果呢？

4 个回答

Fractal

✓ 已被采纳

阴影完美，其他细节你自己弄了

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Round Shadow</title>
 <style type="text/css">
 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;}
    </style>
</head>
<body>
<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></div>
</body>
</html>

=======================================================

参考这两个链接里的回答（不一定是我答的）

https://segmentfault.com/q/1010000024416695/a-1020000024422115

https://segmentfault.com/q/1010000024492696/a-1020000024493605