element el-tabs 底部的下划线变细

可以通过修改 `border-bottom-width` 属性来调整 `el-tabs` 底部下划线的粗细。例如，将下划线变为原来的一半粗细，可以在 CSS 中添加以下代码：

.el-tabs__header:before {
  border-bottom-width: 1px; /* 将原来的 2px 改为 1px */
}

如果只想修改某个特定的 `el-tabs` 实例的下划线粗细，可以给该实例添加一个自定义的 class，并在 CSS 中使用该 class 来修改样式。例如：

<el-tabs class="my-tabs">
  <!-- ... -->
</el-tabs>

.my-tabs .el-tabs__header:before {
  border-bottom-width: 1px; /* 将下划线粗细改为 1px */
}

相关问题

vue element el-tabs 去掉底部的下划线和切换时的下划线

要去掉el-tabs组件底部的下划线和切换时的下划线，你可以使用以下两种方法：

1. 使用CSS样式覆盖默认样式：

.el-tabs__header::after {
  border-bottom: none;
}

.el-tabs__item.is-active {
  border-bottom: none;
}

2. 通过设置组件属性来实现：

<el-tabs type="border-card" :tab-position="position" :stretch="false" style="border: none">
  <el-tab-pane label="tab1"></el-tab-pane>
  <el-tab-pane label="tab2"></el-tab-pane>
  <el-tab-pane label="tab3"></el-tab-pane>
</el-tabs>

其中，`:stretch="false"` 可以去掉切换时的下划线， `style="border: none"` 可以去掉底部的下划线。

el-tabs下划线样式去掉

在Element UI的el-tabs组件中，可以通过自定义样式来去掉下划线样式。具体的步骤如下：

1. 首先，在el-tabs组件外部包裹一个自定义的容器，例如一个div元素，给该容器添加一个类名，例如"custom-tabs"。

2. 然后，在你的CSS文件中或者style标签中，使用该类名来选择该容器，并设置其子元素el-tabs-nav的border-bottom属性为none，即可去掉下划线样式。

示例代码如下：

HTML：

<div class="custom-tabs">
  <el-tabs>
    <!-- tabs内容 -->
  </el-tabs>
</div>

CSS：

.custom-tabs .el-tabs-nav {
  border-bottom: none;
}

这样就可以去掉el-tabs组件的下划线样式了。