gpt4 book ai didi

html - 如何使顶部两个 Angular 的制表符变圆?

转载 作者:太空宇宙 更新时间:2023-11-04 02:54:08 24 4
gpt4 key购买 nike

我目前有一个矩形蓝色选项卡,当我单击它时它会突出显示。如何使该选项卡具有左上角和右上角圆 Angular ?

这是我的 fiddle : http://jsfiddle.net/huskydawgs/vm4d3a1q/27/

这是我的 HTML:

    <ul class="nav-tabs">
<li>
<input checked="checked" id="tab-1" name="tabs" type="radio" /> <label for="tab-1">First</label>
<div class="nav-tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum fuga porro placeat enim cumque nobis, eum atque suscipit optio quibusdam dolores recusandae! Ab fugiat deserunt explicabo expedita delectus labore illum.</p>
<p>Harum facilis, dolore! Sed eligendi accusamus harum, earum error a praesentium! Esse laboriosam incidunt, suscipit possimus magnam nostrum voluptatem minima deserunt nisi, sint iste tenetur corporis itaque aspernatur neque explicabo.</p>
<p>Nobis nihil dolores optio! Aperiam laudantium ipsam alias enim, omnis voluptatem laboriosam, repudiandae magni, quas, quos in repellendus delectus! Vel consequatur tempora aperiam earum temporibus nemo cupiditate laudantium laboriosam, eos.</p>
<p>Quis eveniet delectus, earum rerum asperiores ducimus quos eaque ex tenetur corporis ullam hic quasi magni laborum necessitatibus impedit voluptates! Deleniti fuga aliquam ex. Reiciendis necessitatibus, obcaecati et labore aliquid.</p>
<p>Fuga odit at nostrum molestias, inventore deserunt tempore quae cupiditate nulla voluptatem earum doloribus quia iste, eum dignissimos totam similique ea unde asperiores! Vero unde rem laboriosam repellat sunt. Vel.</p>
<p>Qui nobis praesentium in. Natus quisquam in repudiandae laborum saepe excepturi veniam dicta vitae porro qui at obcaecati dolorum amet eligendi asperiores quia velit eum, aut libero itaque quidem numquam.</p>
<p>Similique repellendus blanditiis ratione odio ducimus cupiditate laborum maiores a explicabo molestias voluptas tenetur, sed sit inventore officia mollitia iusto doloremque accusamus provident cum obcaecati dolores. Saepe enim natus perferendis.</p>
<p>Aut perspiciatis eum explicabo odio aspernatur laboriosam impedit atque doloremque at, quo. Dolore fugiat et cupiditate accusamus consectetur illum error ut saepe, explicabo laudantium, perspiciatis ea similique libero, ullam molestiae?</p>
<p>Impedit obcaecati sequi a maxime eos fuga accusantium, labore molestias voluptas dolor sapiente dolore error ipsa vero quisquam inventore vitae quam assumenda quibusdam unde at hic? Facere possimus itaque doloremque!</p>
<p>Corrupti obcaecati recusandae, doloribus quasi. Laboriosam aspernatur sequi voluptatibus, consequuntur. Similique nam omnis at molestias porro consectetur quo saepe, dolorem repellat perspiciatis quibusdam architecto cupiditate provident error praesentium ex unde!</p>
</div>
</li>
<li>
<input id="tab-2" name="tabs" type="radio" /> <label for="tab-2">Second</label>
<div class="nav-tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, quae quas nemo veniam ullam magnam dolorum vero! Quod animi a, quidem nostrum, explicabo laboriosam distinctio ea sint recusandae, et voluptatibus.</p>
</div>
</li>
<li>
<input id="tab-3" name="tabs" type="radio" /> <label for="tab-3">Third</label>
<div class="nav-tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa laborum dolore officiis assumenda nihil quas nam, molestiae est corrupti! Tenetur, recusandae enim hic itaque cupiditate nisi quidem inventore voluptatum neque.</p>
</div>
</li>
<li>
<input id="tab-4" name="tabs" type="radio" /> <label for="tab-4">Fourth</label>
<div class="nav-tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa laborum dolore officiis assumenda nihil quas nam, molestiae est corrupti! Tenetur, recusandae enim hic itaque cupiditate nisi quidem inventore voluptatum neque.</p>
</div>
</li>
</ul>

这是我的 CSS:

.nav-tabs{
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
text-align: center;
}

.nav-tabs:after{
content: "";
clear: both;
display: block;
height: 242px;
}

.nav-tabs li{
display: inline-block;
}

.nav-tabs li > input{
display: none;
}

.nav-tabs li > label{
display: inline-block;
border: none;
border-right-width: 0;
border-bottom-width: 0;
height: 30px;
line-height: 30px;
padding: 5px 20px;
cursor: pointer;
}

.nav-tabs li:last-child > label{
border-right-width: 1px;
}

.nav-tabs .nav-tab-content{
display: none;
position: absolute;
left: 0;
padding: 20px;
border-top: 1px solid #e2e3e4;
height: 200px;
text-align: left;
}

/* Functional */

.nav-tabs li > input:checked + label{
background-color: #2251a4;
color: #fff;
}

.nav-tabs li > input:checked ~ .nav-tab-content{
display: block;
}

最佳答案

添加

border-radius: 6px 6px 0 0;

.nav-tabs li > label

关于html - 如何使顶部两个 Angular 的制表符变圆?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32489417/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com