element ui之修改样式Tabs 标签页_el-tabs样式

●选项卡样式

原图:

●选项卡整个边(四边)

<style>
/*未选中时字体颜色*/
.el-tabs__item{
  color: #FFFFFF;
}
/*选项卡整个边框*/
.el-tabs--card>.el-tabs__header .el-tabs__nav{
  border: 1px solid #3c4249;
}
/*选中时底部边颜色*/
.el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
  border-bottom: 1px solid #3275f9;
}
/*选中时字体颜色*/
.el-tabs__item.is-active{
  color: #3275f9;
}
</style>

/**
修改底部最长的边颜色
 */
.el-tabs--card>.el-tabs__header{
    border-bottom: 1px solid #2F3A57 !important;
    //border-bottom: 0 !important;
}

/**
修改侧边标签项竖线颜色
 */
.el-tabs--card>.el-tabs__header .el-tabs__item{
    border-left: 1px solid #2F3A57 !important;
    //border-bottom: none !important;
    background: rgba(255,255,255,0.05) !important;
}

●基础的、简洁的标签页

原图：

改变底部最显眼的白边

<style>
/*改变底部最显眼的白色粗犷滴边*/
.el-tabs__nav-wrap::after{
  background-color: #0b131b;
}
</style>

最后效果

<style>
/*改变底部最显眼的白色粗犷滴边*/
.el-tabs__nav-wrap::after{
  background-color: #0b131b;
}
/*未选中时字体颜色*/
.el-tabs__item{
  color: #FFFFFF;
}
/*选中时底部边颜色*/
.el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
  border-bottom: 1px solid #3275f9;
}
/*选中时字体颜色*/
.el-tabs__item.is-active{
  color: #3275f9;
}
.el-tabs__active-bar{
  background-color: #3275f9;
}
</style>