问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何使用 CSS 绘制具有特定样式的 Tabs（标签页）?

头像
Lucian
    1348

    CSS 如何画出下面这种Tab 样式
    image.png

    右侧那个弧度，该如何画，还需要考虑z-index问题

    css-selectorscss3csshtml
    阅读 2.1k
    avatarAI BotBETA

    在CSS中绘制具有特定样式的Tabs（标签页）通常会涉及到多个CSS属性的组合，包括border、border-radius、background-color、box-shadow等。对于你提供的图片中的弧形Tab样式，你可以使用border-radius属性来创建弧形角，并使用position和z-index来处理Tabs之间的层次关系。

    以下是一个简化的CSS样式示例，用于创建一个具有弧形角的Tab，并考虑z-index：

    /* 假设你有HTML结构如下 */
.tabs {
  display: flex;
  align-items: flex-end; /* 底部对齐 */
  border-bottom: 1px solid #ccc; /* 底部边框 */
  padding-bottom: 10px; /* 底部内边距 */
  position: relative; /* 相对于此元素进行定位 */
}

.tab {
  /* 默认样式 */
  flex: 1; /* 等分空间 */
  text-align: center; /* 文本居中对齐 */
  padding: 10px; /* 内边距 */
  cursor: pointer; /* 鼠标悬停时显示手形图标 */
  position: relative; /* 相对于此元素进行定位 */
  margin-right: 10px; /* 右侧外边距 */
  background-color: #fff; /* 背景色 */
  border: 1px solid #ccc; /* 边框 */
  border-bottom: none; /* 底部无边框 */
  border-top-left-radius: 5px; /* 左上角弧度 */
  border-top-right-radius: 5px; /* 右上角弧度 */
  z-index: 1; /* 初始z-index */
  transition: all 0.3s ease; /* 过渡效果 */
}

/* 选中状态的Tab */
.tab.active {
  background-color: #f0f0f0; /* 选中时的背景色 */
  border-bottom: 2px solid #007BFF; /* 底部边框加粗并变色 */
  margin-bottom: -1px; /* 底部外边距为负值，与底部边框重叠 */
  z-index: 2; /* 选中时的z-index更高 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

/* 最后一个Tab的右侧弧形 */
.tab:last-child {
  border-top-right-radius: 20px; /* 加大右上角弧度 */
}

/* 如果需要的话，还可以添加hover状态样式 */
.tab:hover {
  /* hover时的样式 */
}

    HTML 结构可能类似于：

    <div class="tabs">
  <div class="tab active">Tab 1</div>
  <div class="tab">Tab 2</div>
  <div class="tab">Tab 3</div>
  <!-- 更多Tabs... -->
</div>

    在这个示例中，.tab 类定义了Tab的基本样式，.tab.active 类定义了选中状态的样式，.tab:last-child 选择了最后一个Tab并修改了它的右上角弧度。position: relative; 和 z-index 用于处理Tabs之间的层次关系，以确保选中的Tab在视觉上位于其他Tabs之上。

    请注意，这只是一个基本的示例，你可能需要根据你的具体需求进行调整。例如，你可能需要添加悬停（hover）效果，或者调整弧形的大小和位置。

    1 个回答
    得票最新
    头像
    WillisYe
      1.2k1614
      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>梯形tab按钮-基于clip-path path函数实现</title>
    <style>
        .wrap {
            background-color: #eee;
            margin: 0 auto;
            padding: 10px;
        }

        .tabs {
            display: flex;
            flex-direction: row-reverse; 
            align-items: start;
            justify-content: start;
            margin-left: 40px;
        }

        .tab {
            flex-grow: 0;
            width: 100px;
            padding-right: 75px;
            height: 50px;
            cursor: pointer;
            position: relative;
            text-align: center;
            line-height: 50px;
            clip-path: path('M 0,0 L 100 0 C 125,0 125,50 175,50 L 0, 50 Z');
            background-color: cyan;
            margin-left: -40px;
        }

        .tab.active {
            background-color: blue;
            color: #fff;
        }

        .content-wrap {
            min-height: 200px;
            background-color: #fff;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/alpinejs/3.10.3/cdn.min.js" defer>

    </script>
    <script src="https://unpkg.com/@unocss/runtime">

    </script>
    <script>
        // pass unocss options
    window.__unocss = {
      rules: [
        // custom rules...
      ],
      presets: [
        // custom presets...
      ],
      // ...
    }
    </script>
</head>

<body>
    <div class="wrap" x-data="initData()">
        <div class="tabs">
            <template x-for="index in 3" :key="index">
                <div @click="onTabClick(index)" class="tab" :class="{ 'active': activeIndex == index }" x-text="'标签' + index">
                </div>
            </template>
        </div>
        <div class="content-wrap">

        </div>
    </div>

    <script>
        function initData() {
      return {
        activeIndex: 1,
        onTabClick(index) {
          this.activeIndex = index
        }
      }
    }
    </script>

</body>

</html>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题