css实现Chrome标签栏

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

这是我实现的效果:

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

以下是代码:

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </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标签栏的样式就已经完成啦,

相关推荐
IT_陈寒21 分钟前
React 性能优化:5个实战技巧让首屏加载提升50%,开发者亲测有效!
前端·人工智能·后端
rising start38 分钟前
前端基础一、HTML5
前端·html·html5
鬼谷中妖1 小时前
JavaScript 循环与对象:深入理解 for、for...in、for...of、不可枚举属性与可迭代对象
前端
大厂码农老A1 小时前
你打的日志,正在拖垮你的系统:从P4小白到P7专家都是怎么打日志的?
java·前端·后端
im_AMBER1 小时前
CSS 01【基础语法学习】
前端·css·笔记·学习
DokiDoki之父1 小时前
前端速通—CSS篇
前端·css
pixle01 小时前
Web大屏适配终极方案:vw/vh + flex + clamp() 完美组合
前端·大屏适配·vw/vh·clamp·终极方案·web大屏
ssf19871 小时前
前后端分离项目前端页面开发远程调试代理解决跨域问题方法
前端
@PHARAOH1 小时前
WHAT - 前端性能指标(加载性能指标)
前端
尘世中一位迷途小书童1 小时前
🎨 SCSS 高级用法完全指南:从入门到精通
前端·css·开源