导航栏上的圆角（HTML）

Question

 div { width: 1310px; padding: 10px; margin: 0; background-color: #212F3D; text-align: center; } 

 <div class="topnav-centered" id="myTopnav"> <a style="font-family:Verdana; color:White; font-size: 20px; display:inline; padding: 10px 50px; " href="01.HTML" class="active">Home</a> <a style="font-family:Verdana; color:White; font-size: 20px; display:inline; padding: 10px 50px; " href="02.HTML">HTML</a> </div> 

我正在为学校做一个html项目，我想绕过顶部导航栏。 我有一个代码，但是我不确定我是否给出了代码的正确部分。如果我还没有告诉我，我会正确编辑它。

Answer 1

试试这个，就完成了...

div {
    border-radius: 20px;
}

 div{ width: 1310px; padding: 10px; margin: 0; background-color: #212F3D; text-align: center; border-radius: 20px; } 

 <div class="topnav-centered"id="myTopnav"> <a style="font-family:Verdana; color:White; font-size: 20px; display:inline; padding: 10px 50px; "href="01.HTML" class="active">Home</a> <a style="font-family:Verdana; color:White; font-size: 20px; display:inline; padding: 10px 50px; "href="02.HTML">HTML</a> </div> 

Answer 2

使用border-radius使导航栏的边缘变圆。 您还可以通过以下方式定位每个角点：

border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;

随意玩这些价值观。 这是您的代码编辑的https://www.w3schools.com/code/tryit.asp?filename=FWTO4Y7J67ZA
一些建议：您应该按类别或ID定位顶部导航栏。 我建议您按班级参考来做。 还应尽可能避免使用内联样式，因为您将不得不多次编写代码。

Answer 3

这将使您用一个特定的值舍入一个特定的角。

 div{ width: 1310px; padding: 10px; margin: 0; background-color: #212F3D; text-align: center; border-radius: 20px; } div { //you can manipulate which side to round and which not border-top-right-radius: 25px; border-top-left-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px; } 

 <div class="topnav-centered" id="myTopnav"> <a style="font-family:Verdana; color:White; font-size: 20px; display:inline; padding: 10px 50px; " href="01.HTML" class="active">Home</a> <a style="font-family:Verdana; color:White; font-size: 20px; display:inline; padding: 10px 50px; " href="02.HTML">HTML</a> </div>