Css 如何将内边框添加到具有透明背景的引导3导航选项卡?
我不知道如何隐藏选项卡窗格的重叠边框。我试着剪辑它,但它仍然是可见的 有人知道任何jQuery插件可以隐藏底部边框吗 请看底部的小提琴 HTMLCss 如何将内边框添加到具有透明背景的引导3导航选项卡?,css,twitter-bootstrap-3,Css,Twitter Bootstrap 3,我不知道如何隐藏选项卡窗格的重叠边框。我试着剪辑它,但它仍然是可见的 有人知道任何jQuery插件可以隐藏底部边框吗 请看底部的小提琴 HTML 从选项卡窗体中删除边框底部属性。导航选项卡li.active a:after并设置边框底部:无用于.tab表单.nav tabs li.active a:before设置边框底部:无对于.tab forms.nav tabs li.active a::在之后,我这样做了,它只是显示了.tab窗格边框,在小提琴中是黄色的。您可以删除边框底部,但选项卡
从
选项卡窗体中删除边框底部
属性。导航选项卡li.active a:after
并设置边框底部:无代码>用于.tab表单.nav tabs li.active a:before
设置边框底部:无
对于.tab forms.nav tabs li.active a::在
之后,我这样做了,它只是显示了.tab窗格边框,在小提琴中是黄色的。您可以删除边框底部,但选项卡窗格的边框仍然可见。。。?现在你们有了半透明的布局,这不会有任何区别。我认为通过SVG可以做到这一点。当我切换到svg选项卡时,将更新问题。如果你们发现任何类似于此的svg标签,请链接我们。你能与fiddle分享吗?这是你的答案。如果这不是你的意思,请修改和分享。它显示了黄色边框,我需要删除该空间,使选项卡看起来像一个文件夹。
<section id="content" class="container">
<div class="row">
<div class="tab-forms col-md-12">
<!-- Nav tabs -->
<ul class="nav nav-tabs pull-right" role="tablist">
<li role="presentation" class="active">
<a href="#home" aria-controls="home" role="tab"
data-toggle="tab">SIGN UP</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">SIGN
IN</a>
</li>
</ul>
<div class="clearfix"></div>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<div class="form-border">
</div>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<div class="form-border">
</div>
</div>
</div>
</div>
</div>
</section>
body {
background: #155C91;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top: 88px;
padding-bottom: 20px;
}
.tab-forms .nav-tabs {
border-bottom: 0;
}
.tab-forms .nav-tabs li.active a {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0);
border-bottom: 0;
margin-bottom: 1px;
-webkit-clip-path: polygon(0px 0px, 144px 0px, 144px 81px, 0px 81px);
/*Chrome,Safari*/
/*Firefox*/
}
.tab-forms .nav-tabs li.active a:before {
content: "";
width: 90%;
height: 55px;
top: 8px;
left: 5%;
position: absolute;
border: 1px solid #fff;
}
.tab-forms .nav-tabs li.active a:after {
border-bottom: 1px solid #fff;
content: "";
width: 127px;
height: 55px;
top: 8px;
left: 7px;
position: absolute;
}
.tab-forms .nav-tabs li a {
margin-right: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
background: rgba(255, 255, 255, 0.1);
width: 144px;
text-align: center;
font-size: 18pt;
}
.tab-forms .nav-tabs li a:before {
content: "";
width: 80%;
height: 25px;
top: 8px;
left: 11%;
position: absolute;
border: 1px solid #fff;
}
.tab-forms .tab-content {
padding: 8px;
min-height: 100px;
background: rgba(255, 255, 255, 0.2);
}
.tab-forms .tab-content .tab-pane {
border: 1px solid #ffff00;
min-height: 100px;
}
rect {
fill: red;
}