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

👻闲暇小记一下:以后用到的话直接拿,省得还要再写。。。。
在这里插入图片描述
💊颜色的话用的是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;
                }
            }
        }
    }

版权声明:本文为weixin_44020255原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
THE END
< <上一篇
下一篇>>