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

GitHub 加速计划 / eleme / element
13
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 天前 )
c345bb45 1 年前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 1 年前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐