在網頁中，表單是十分常見的元素。對于開發者們而言，如何美化表單成為了一個細節問題。而 CSS 就是美化表單的利器之一。利用 CSS 可以非常方便地讓表單看起來更加美觀、整潔。

下面我們來看一個用 CSS 制作表單的例子：

<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name">
<label for="email">郵箱:</label>
<input type="email" id="email" name="email">
<label for="message">留言:</label>
<textarea id="message" name="message"></textarea>
<input type="submit" value="提交">
</form>

該表單包括三個輸入框和一個提交按鈕。使用 CSS，我們可以將其美化如下：

form label {
display: block; /* 將標簽變成塊級元素 */
margin-top: 10px; /* 添加上外邊距，改變排列位置 */
font-weight: bold; /* 加粗 */
}
form input[type="text"], form input[type="email"], form textarea {
display: block; /* 將輸入框和文本域變成塊級元素 */
width: 100%; /* 占用整個父元素寬度 */
margin-top: 5px; /* 添加上外邊距 */
padding: 10px 20px; /* 添加內邊距，使其看起來更順眼 */
border: none; /* 去掉邊框 */
background-color: #f2f2f2; /* 設置背景色，讓其更美觀 */
}
form textarea {
height: 150px; /* 特殊處理文本域的高度 */
}
form input[type="submit"] {
background-color: #5cb85c; /* 設置按鈕背景色 */
color: #fff; /* 設置按鈕文字顏色 */
border: none; /* 去掉邊框 */
padding: 10px 20px; /* 添加內邊距，與輸入框保持一致 */
margin-top: 10px; /* 添加上外邊距 */
cursor: pointer; /* 改變光標形狀 */
transition: background-color .3s ease-in-out; /* 添加過渡效果 */
}
form input[type="submit"]:hover {
background-color: #449d44; /* 鼠標懸停時背景色變化 */
}

運行效果如下：