ElementUI中Tabs标签页样式修改------胶囊Tab切换栏

最新推荐文章于 2024-05-27 14:49:38 发布

香菜大魔王(✪ω✪)

最新推荐文章于 2024-05-27 14:49:38 发布

阅读量1.1k

点赞数 1

分类专栏：乱七八糟什么都有文章标签： elementui javascript css

本文链接：https://blog.csdn.net/weixin_44020255/article/details/127535069

版权

乱七八糟什么都有专栏收录该内容

3 篇文章 1 订阅

订阅专栏

👻闲暇小记一下：以后用到的话直接拿，省得还要再写。。。。
在这里插入图片描述
💊颜色的话用的是elementUI的颜色，上代码！

::v-deep {
        .el-tabs--border-card {
            border: none;
            box-shadow: none;
            .el-tabs__header {
                background-color: transparent;
                border: none;
                .el-tabs__nav-scroll{
                	width: 45%;
                	margin: 0 auto;
                    border-radius: 50px;
                    border: none;
                }
                .el-tabs__item {
                    background-color: #F0F8FF;
                    color: #fff;
                    border: none;
                }
                .el-tabs__item.is-active {
                    background-color: #409EFF;
                    color: #fff !important;
                }
                #tab-0 {
                    color: black;
                    border-radius: 50px 0 0 50px;
                }
                #tab-1 {
                    color: black;
                    border-radius: 0 50px 50px 0;
                }
            }
        }
    }