阴影完美，其他细节你自己弄了
<!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
我用的vue, 设置在菜单上，代码参考：https://github.com/little3201...
我只是想到了下边的元素作隐藏处理 然后留下上边隐藏
btw 你确定你这个不是切的图而是css写的？？
clip-path 解决反向圆弧， drop-shadow 生成阴影， 另外 SVG 应该会更简单。
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
暂无简介
文章 0 评论 0
接受
发布评论
评论（4）
阴影完美，其他细节你自己弄了
=======================================================
参考这两个链接里的回答（不一定是我答的）
https://segmentfault.com/q/1010000024416695/a-1020000024422115
https://segmentfault.com/q/1010000024492696/a-1020000024493605
我用的vue, 设置在菜单上，代码参考：https://github.com/little3201...
我只是想到了下边的元素作隐藏处理 然后留下上边隐藏
btw 你确定你这个不是切的图而是css写的？？
clip-path 解决反向圆弧， drop-shadow 生成阴影， 另外 SVG 应该会更简单。