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

最新推荐文章于 2024-04-12 09:30:00 发布

泡芙小姨

最新推荐文章于 2024-04-12 09:30:00 发布

阅读量817

点赞数 8

文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/m0_70782896/article/details/135675115

版权

ElementUI中Tabs标签页样式修改------胶囊Tab切换栏_标签页切换样式怎么改-CSDN博客

::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;
                }
            }
        }
    }
————————————————
版权声明：本文为CSDN博主「香菜大魔王(✪ω✪)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_44020255/article/details/127535069