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

zhezhongyun 2025-05-03 17:49 10 浏览

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

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

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

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

完整代码如下：

<!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>
如若转载，请注明出处：开源字节   https://sourcebyte.vip/article/383.html

HTML meta http-equiv 属性

上一篇：网络安全之从原理看懂XSS（网络安全的原理）
下一篇：PHP页面跳转（php页面跳转传参）

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

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

接口测试遇到500报错?别慌，你的头部可能有点问题

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

关于HTML5被简称做H5，你怎么看?（html5缩写）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?