这次来看一个带特殊圆角导航栏布局，如下谷歌浏览器的标签栏：

CSS使用渐变实现Chrome标签栏效果_html

这样一个布局如何实现呢？

CSS 渐变几乎是无所不能的，什么的图形都能绘制，这里可以拆分一下，两个矩形，两个圆形，还有两个反向圆角，也就是 2 个 线性渐变，4 个径向渐变，示意如下：

CSS使用渐变实现Chrome标签栏效果_css_02

最终实时效果如下（上面是原理图）

CSS使用渐变实现Chrome标签栏效果_标签栏_03

完整代码如下：


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS使用渐变实现Chrome标签栏效果</title>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      .tab {
        display: flex;
        background-color: #dee1e6;
        padding: 0 15px;
        font-size: 14px;
      }
      .tab-item {
        position: relative;
        padding: 10px 35px;
        cursor: pointer;
        margin: 0 -20px;
        color: transparent;
        background-image: radial-gradient(
            circle at 27px 10px,
            var(--color, rgba(33, 150, 243, 0.59)) 12px,
            transparent 0
          ),
          linear-gradient(var(--color, #4caf50), var(--color, #4caf50)),
          linear-gradient(var(--color, #f44336), var(--color, #f44336)),
          radial-gradient(
            circle at 15px 0,
            transparent 15px,
            var(--color, #9c27b0) 0
          );
        background-size: calc(100% - 54px), calc(100% - 30px) calc(100% - 12px),
          calc(100% - 54px) 100%, 100% 12px;
        background-position: left top, center bottom, center bottom,
          -15px bottom;
        background-repeat: repeat-x, no-repeat, no-repeat, repeat-x;
      }
      .tab.fix .tab-item {
        --color: transparent;
        color: #000;
      }
      .tab.fix .tab-item:hover {
        --color: #fff;
      }
      .tab.fix .tab-item.active {
        --color: #fff;
        z-index: 1;
      }
    </style>
  </head>
  <body>
    <nav class="tab fix">
      <a class="tab-item">用户管理</a>
      <a class="tab-item">角色管理</a>
      <a class="tab-item active">部门管理</a>
      <a class="tab-item">岗位管理</a>
    </nav>
  </body>
</html>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.