在CSS中，可以使用border-radius屬性來改變輸入框的圓角，以下是一些示例代碼，展示如何應(yīng)用border-radius屬性來創(chuàng)建圓角輸入框：

示例 1: 基本用法

input {
  border-radius: 10px;
}

這個(gè)示例將輸入框的四個(gè)角都設(shè)置為10像素的圓角，你可以根據(jù)需要調(diào)整border-radius的值。

示例 2: 不同大小的圓角

input {
  border-radius: 10px 20px 30px 40px;
}

在這個(gè)示例中，每個(gè)角的圓角大小不同，分別設(shè)置為10像素、20像素、30像素和40像素。

示例 3: 僅設(shè)置特定角的圓角

input {
  border-radius: 10px 0 0 10px;
}

這個(gè)示例僅設(shè)置了輸入框的兩個(gè)對(duì)角為10像素的圓角，另外兩個(gè)角保持不變。

示例 4: 使用橢圓形的圓角

input {
  border-radius: 50%;
}

這個(gè)示例將輸入框設(shè)置為橢圓形，通過border-radius屬性將其四個(gè)角都設(shè)置為50%。

示例 5: 結(jié)合邊框使用

input {
  border: 2px solid #333;
  border-radius: 10px;
}

在這個(gè)示例中，輸入框不僅設(shè)置了10像素的圓角，還設(shè)置了2像素寬的邊框，邊框顏色和圓角大小可以根據(jù)需要調(diào)整。

示例 6: 多層邊框和圓角

input {
  border: 2px solid #333; /* 外層邊框 */
  border-radius: 10px; /* 外層邊框的圓角 */
  padding: 5px; /* 內(nèi)層邊框 */
  background-clip: padding-box; /* 確保內(nèi)層邊框不覆蓋圓角 */
}

這個(gè)示例展示了如何設(shè)置多層邊框和圓角，通過background-clip屬性確保內(nèi)層邊框不會(huì)覆蓋外層邊框的圓角。

希望這些示例能幫助你更好地理解和應(yīng)用border-radius屬性來創(chuàng)建圓角輸入框，如果你有更多問題或需要進(jìn)一步的幫助，請(qǐng)隨時(shí)提問！