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

RowlingJoe
  • 140

image
image

回复
阅读 435
4 个回答
✓ 已被采纳

image

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

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

image.png

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏