带有 CSS 的弯角答案

【问题标题】：Curved corners with CSS带有 CSS 的弯角
【发布时间】：2015-03-16 23:26:10
【问题描述】：

我已经有了一个简单的导航栏和一些 CSS 样式。

导航栏的顶部将有一个白色边框，用于内部链接。

对于两个外部链接，我希望左侧有一个边框，左侧有一个边框，右侧有一个边框，还有弯曲的角落，但我不知道如何将 CSS 集中在这两个 li 上.

我试图给李一个家的身份，但没有奏效

我还尝试将弯角代码放在 ul 和 NavBar 标签中。这是我尝试过的方法

<div id="NavBar">
<ul>
<li id="Home"><a href="Index.php"><strong>Home</strong></a></li>
<li><a href="AboutUs.php"><strong>About Us</strong></a></li>
<li><a href="Products.php"><strong>Products</strong></a></li>
<li><a href="Policies.php"><strong>Policies</strong></a></li>
<li id="ContactUs"><a href="ContactUs.php"><strong>Contact Us</strong></a></li> 
</ul>

这是我试图专注于一个 li 家的 CSS。

#NavBar li {
   margin:0;
   padding:0;
   list-style:none;
   float:left;
   position:relative;
   border:solid 3px #FFF;
   border-bottom:0px;
   width:20%;

   }
#NavBar li Home {
    margin:0;
    padding:0;
    list-style:none;
    float:left;
    position:relative;
    border:solid 3px #FFF;
    border-bottom:0px;
    width:20%;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;

     }

感谢您的帮助

创建了一个 JSFiddle：https://jsfiddle.net/b4ejndkz/

【问题讨论】：

标签： html css

【解决方案1】：

如果您要使用width:20% 并指定边框宽度，则需要box-sizing:border-box;，这样在确定总宽度时会考虑边框大小。否则它会像现在一样分成两行。

然后您可以设置一个特定的角以应用边框半径，方法是：border-radius: 5px 0 0 0;（左上、右上、右下、左下）。

您可以使用 id 选择器 https://jsfiddle.net/b4ejndkz/2/... 或使用 CSS 选择器 :first-child 和 :last-child 来选择列表中的第一个和最后一个元素：

#NavBar li {
   box-sizing:border-box;
   margin:0;
   padding:0;
   list-style:none;
   float:left;
   position:relative;
   border:solid 3px #FFF;
   border-bottom:0px;
   width:20%;
}

#NavBar li:first-child {
    border-radius: 5px 0 0 0;
}

#NavBar li:last-child {
    border-radius: 0 5px 0 0;
}

https://jsfiddle.net/b4ejndkz/1/

【讨论】：

这工作完美，谢谢！并感谢您对宽度的建议。

【解决方案2】：

使用 :first-child 和 :last-child。

要仅访问列表的第一个或最后一个元素，请执行以下操作：

ul li:first-child {
    Styles for first element
}

ul li:last-child {
    Styles for last element
}

这样，您可以将所需的样式应用于匹配的链接。

【讨论】：