在 Web 開發中，輸入框（input）是常見的元素之一。通過 CSS 樣式，我們可以定制輸入框的風格，使其更加美觀。本文將介紹如何使用 CSS 實現藍色的輸入框。

/* CSS 代碼 */
input[type="text"] {
background-color: #E6F4FF; /* 背景色為淺藍色 */
border: 1px solid #4DB7FF; /* 邊框為深藍色 */
border-radius: 5px; /* 圓角半徑為5px */
font-size: 14px; /* 字體大小為14px */
padding: 5px; /* 內邊距為5px */
}
input[type="text"]:focus {
outline: none; /* 去除聚焦樣式 */
box-shadow: 0 0 3px #4DB7FF; /* 添加陰影效果 */
}

上述代碼中，我們首先設置了輸入框的背景色為淺藍色，邊框為深藍色，并且添加了圓角邊框樣式。同時，我們也設置了輸入框的字體大小和內邊距。

為了增強用戶體驗，我們在獲取焦點時添加了陰影效果，并去除了聚焦樣式。使用這些樣式后，我們得到了一個美觀且易于使用的藍色輸入框。