導航欄上的圓角（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>