请问如何实现这种外圆角的阴影效果呢？_编程技术网-程序员技术内容聚合平台

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

###

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

<!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

###

我只是想到了下边的元素作隐藏处理然后留下上边隐藏

btw 你确定你这个不是切的图而是css写的？？

###

clip-path 解决反向圆弧， drop-shadow 生成阴影，另外 SVG 应该会更简单。