中心有透明孔的 CSS 导航栏（新材料设计导航栏）答案

【问题标题】：CSS Navbar with transparent hole at center (New Material Desgin Navbar)中心有透明孔的 CSS 导航栏（新材料设计导航栏）
【发布时间】：2019-01-23 16:40:54
【问题描述】：

我已经看到了 Material Design 的新模型，并且我检查了一种在设备上制作底部导航栏的新方法。当有一个按钮时，新的导航栏在中心有一个洞，但我尝试使用 CSS 来制作它，但我遇到了一个问题。最好或正确的方法是什么？你能帮帮我吗？

查看带有孔和按钮的导航栏：

我尝试使用 box-shadow、clip-path、SVG 图像、css 蒙版来实现这一点……但我所有的解决方案都有一些局限性。

另外一个问题是：按钮放在导航栏上有透明效果吗？还是导航栏有一个剪裁的部分来放置de按钮？

谢谢！

【问题讨论】：

如果你想要我提出我的解决方案，请问我！我不要求你给我做些什么好吗？只要给我正确的方法..
是的，您应该绝对发布您尝试过的内容，并附上照片的外观，并清楚地解释为什么它们不被接受。
这是Toufic Batache 的fiddle，它应该为您的追求提供一个良好的起点。

标签： css material-design

【解决方案1】：

我建议在这里为简单起见，您想要完成的是透明背景，所以使用背景。您可以使用渐变背景轻松创建此效果。渐变背景允许您使用不同的颜色作为背景并使用形状。您可以在脚栏上添加此背景。

background: radial-gradient(circle at 150px 0, transparent 50px, #fabada 0) 0 0;

我在这里为您创建一个示例： https://codepen.io/luarmr/pen/ajgabq

图标只需使用border-radius

【讨论】：

太棒了！谢谢劳尔。我不知道如何控制渐变的高度位置。恭喜我们！
如果您想在“孔”中获得更高的分辨率，只需将第二个渐变效果的零值更改为 51px。像这样：codepen.io/vinibiavatti/pen/KBjrVj