如何在CSS中繪制特定邊框？

Question

我想做一個這樣的邊界：

之前：

我想要看起來像這樣：

“標簽”是一個li標簽，例如：

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>           
</ul>

下面的框是這樣的div元素：

<div class="main-container">

</div>

我這樣嘗試過：

li{
    border-top: 1px solid red;
    border-left: 1px solid red;
    border-right: 1px solid red;
}

div{
    border: 1px solid red;
}

但是，這兩個邊界重疊並且令人作嘔。

我想避免使用table-cell方法，因為不可能通過錯誤地計算面積來設計反應型。

Answer 1

套用border-bottom:1px white solid; 到您的活動標簽並增加其padding-bottom 。 現在，使用z-index對其進行調整。 而已 ：）

請參閱下面的鏈接。

https://jsfiddle.net/vaishuk/kpova28h/

Answer 2

這可能會有所幫助

 function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } 

 /* Style the tab */ .tab { overflow: hidden; } /* Style the buttons inside the tab */ .tab button { background-color: white; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 17px; } /* Change background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current tablink class */ .tab button.active { border-left:1px solid red; border-top:1px solid red; border-right:1px solid red; border-bottom:1px solid white; } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; border: 1px solid red; margin-top:-1px; } 

 <p>Click on the buttons inside the tabbed menu:</p> <div class="tab"> <button class="tablinks active" onclick="openCity(event, 'London')">London</button> <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button> <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> </div> <div id="London" class="tabcontent" style="display:block"> <h3>London</h3> <p>London is the capital city of England.</p> </div> <div id="Paris" class="tabcontent"> <h3>Paris</h3> <p>Paris is the capital of France.</p> </div> <div id="Tokyo" class="tabcontent"> <h3>Tokyo</h3> <p>Tokyo is the capital of Japan.</p> </div> 

Answer 3

<div class="main-container">
<ul>
    <li class="list-item active">one</li>
    <li class="list-item ">two</li>
    <li class="list-item ">three</li>           
</ul>
</div>



 <script>
       $('ul li.list-item').click(function(){
       $('ul li.list-item').removeClass('active');
       $(this).addClass('active');
    });
    </script>