https://zhuanlan.zhihu.com/p/545750372 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>tabbar中间凹陷悬浮按钮</title> <!-- https://juejin.cn/post/6991788985009831944?searchId=202310260942369182EC1C81246D31DC8D --> <style> html{background-color: black;} .u-flex{display: flex;} .u-flex-1{flex: 1;} </style> <style> .bg-white{ background-color: #FFFFFF; } .u-flex-1{ flex: 1; } .h100{ height: 100%; } .u-flex{ display: flex; align-items: center; } .custom-tabbar { height: 50px; position: fixed; bottom: 0; width: 100%; .left-tabbar-wrapper { border-top-right-radius: 21px; } .right-tabbar-wrapper { border-top-left-radius: 21px; } .transparent-circle-wrapper { position: relative; width: 100px; .transparent-circle { position: absolute; left: -3px; top: -50px; width: 106px; height: 100px; border-radius: 50%; box-shadow: 0 156px 0 100px #ffffff; } } } </style> </head> <body> <div class="u-flex custom-tabbar"> <div class="u-flex-1 h100 bg-white left-tabbar-wrapper"></div> <div class="h100 transparent-circle-wrapper"> <div class="transparent-circle"></div> </div> <div class="u-flex-1 h100 bg-white right-tabbar-wrapper"></div> </div> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » tabbar中间凹陷悬浮按钮 喜欢 (67)or分享 (0)
