这次来看一个带特殊圆角导航栏布局，如下谷歌浏览器的标签栏：
这样一个布局如何实现呢？
CSS 渐变几乎是无所不能的，什么的图形都能绘制，这里可以拆分一下，两个矩形，两个圆形，还有两个反向圆角，也就是 2 个 线性渐变，4 个径向渐变，示意如下：
最终实时效果如下（上面是原理图）
完整代码如下：
CSS使用渐变实现Chrome标签栏效果
如若转载，请注明出处：开源字节 https://sourcebyte.vip/article/383.html