css实现Chrome标签栏

如图这是一个特殊的带有圆角的导航栏，实现这种效果并不难

这是我实现的效果：

淡一点的就是鼠标悬停的样式

以下是代码：


html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
  head>
  <body>
    <nav class="tab">
      <a class="tab-item">用户管理a>
      <a class="tab-item active">配置管理a>
      <a class="tab-item">角色管理a>
      <a class="tab-item">定时任务补偿a>
    nav>
  body>
  <style>
    .tab {
      display: flex;
      background-color: #efc0b8;
      padding: 10px 15px 0 15px;
      font-size: 14px;
    }
    .tab-item {
      position: relative;
      padding: 10px 35px;
      margin: 0 -15px;
      cursor: pointer;
      transition: 0.2s;
      -webkit-mask-box-image: url("data:image/svg+xml,%3Csvg width='67' height='33' viewBox='0 0 67 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M27 0c-6.627 0-12 5.373-12 12v6c0 8.284-6.716 15-15 15h67c-8.284 0-15-6.716-15-15v-6c0-6.627-5.373-12-12-12H27z' fill='%23F8EAE7'/%3E%3C/svg%3E")
        12 27 15;
    }
    .tab-item.active {
      background: #f8eae7;
      z-index: 1;
    }
    .tab-item:hover {
      background: #f2d0ca;
    }
  style>
html>

至此，类似Chrome标签栏的样式就已经完成啦，

相关阅读:
深入解析C++的auto自动类型推导
QoS服务质量八拥塞避免
金九银十，23届秋招信息超全汇总表！附各大名企优质岗位内推码！持续更新中···
TF1 获取神经网络的中间层输出【以 tf.layers.dense为例】
Centos7.9安装Git
吴恩达机器学习week2实验答案Practice Lab Linear Regression【C1_W2_Linear_Regression】
vuex里的state,actions,mutations用法与理解
华为云MVP马超：云原生时代开发者的挑战与出路
Win11 系统安装事项，跳过微软账户登录，VMWare安装Win11
[JS入门到进阶] 前端开发不能写undefined？这是误区！

原文地址：https://blog.csdn.net/weixin_56818823/article/details/133124479