Html 如何在CSS中绘制特定边框？

我想做一个这样的边界：

<div class="main-container">

</div>

之前：

我希望以后看起来像这样：

“标签”是一个

li

标签，类似于：

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

我试着这样做：

<div class="main-container">

</div>

li{
边框顶部：1px纯红；
左边框：1px纯红；
右边框：1px纯红；
}
div{
边框：1px纯红；
}

然而，这两条边界重叠，令人厌恶

我想避免使用

表格单元格

方法，因为这是不可能的 通过错误计算面积来设计无功类型。

<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>


一个
两个
三个

$（'ul li.list item'）。单击（函数（）{
$（'ul li.list item'）.removeClass（'active'）；
$（this.addClass（'active'）；
});

这可能会有帮助

函数openCity（evt，cityName）{
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i

/*设置选项卡的样式*/
.标签{
溢出：隐藏；
}
/*设置选项卡内按钮的样式*/
.选项卡按钮{
背景色：白色；
浮动：左；
边界：无；
大纲：无；
光标：指针；
填充：14px 16px；
过渡：0.3s；
字号：17px；
}
/*更改悬停按钮的背景色*/
.tab按钮：悬停{
背景色：#ddd；
}
/*创建活动/当前tablink类*/
.tab按钮.active{
左边框：1px纯红；
边框顶部：1px纯红；
右边框：1px纯红；
边框底部：1px纯白；
}
/*设置选项卡内容的样式*/
.tabcontent{
显示：无；
填充：6px 12px；
边框：1px纯红；
页边顶部：-1px；
}

单击选项卡式菜单内的按钮：

伦敦
巴黎
东京
伦敦
伦敦是英国的首都

巴黎
巴黎是法国的首都。

东京
东京是日本的首都

应用

边框底部：1px白色固体

添加到活动选项卡，并增加其

填充底部

。现在使用

z-index

调整它们。就这样：）

请参阅下面的链接

---

谢谢，这真的很容易！新年快乐，谢谢你，欢迎光临。也祝你新年快乐：）