在CSS中，可以使用border-radius屬性來制作輸入框的圓角，以下是一些示例代碼，展示如何實現(xiàn)這一效果：

示例 1: 基本圓角輸入框

input {
  border: 1px solid #000;
  border-radius: 5px;
}

示例 2: 圓角密碼輸入框

input[type="password"] {
  border: 1px solid #000;
  border-radius: 5px;
}

示例 3: 特定樣式的圓角輸入框

input.rounded {
  border: 1px solid #000;
  border-radius: 5px;
}

示例 4: 圓角輸入框的樣式重置

input {
  border: none; /* 移除邊框 */
  border-radius: 0; /* 重置圓角 */
}

示例 5: 使用CSS變量制作可配置的圓角輸入框

:root {
  --input-border-radius: 5px;
}
input {
  border: 1px solid #000;
  border-radius: var(--input-border-radius);
}

示例 6: 為不同瀏覽器設(shè)置不同的圓角輸入框樣式

input {
  border: 1px solid #000;
  border-radius: 5px;
}
/* 針對Firefox的樣式 */
input[moz-user-select="text"] {
  border-radius: 10px; /* 更圓潤的邊角 */
}

示例 7: 使用CSS偽元素制作圓角輸入框標(biāo)簽

input {
  border: 1px solid #000;
  border-radius: 5px;
  position: relative; /* 讓偽元素可以定位 */
}