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

闲暇小记一下:以后用到的话直接拿,省得还要再写。。。。
ElementUI中Tabs标签页样式修改------胶囊Tab切换栏_第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;
                }
            }
        }
    }

你可能感兴趣的:(乱七八糟什么都有,elementui,javascript,css)