在Web表單中，一個非常常見的需求就是讓用戶填寫出生日期。出生日期通常包括年、月、日三個部分，下面我們就來學習一下如何使用CSS來美化這個表單。

首先，我們需要在HTML中添加一個表單元素來讓用戶填寫出生日期。下面是一個例子：

<form>
<label>出生日期：</label>
<input type="text" name="year" placeholder="年" />
<span>-</span>
<input type="text" name="month" placeholder="月" />
<span>-</span>
<input type="text" name="day" placeholder="日" />
</form>

接著，我們可以使用CSS來美化這個表單。首先，我們可以使用flex屬性來讓年、月、日三個輸入框排成一行，代碼如下：

form {
display: flex;
align-items: center;
}
form input {
flex: 1;
}

上面的代碼中，我們設置了表單元素的display屬性為flex，并讓其中的輸入框元素都占據了一定比例的寬度，使它們在同一行中平分寬度。

接下來，我們可以使用CSS偽元素來添加連接年、月、日的橫線，并加上一些樣式，代碼如下：

form span {
margin: 0 6px;
}
form span::before {
content: "";
display: inline-block;
width: 2px;
height: 10px;
background-color: #333;
margin-right: 6px;
vertical-align: middle;
}

上面的代碼中，我們設置了連接年、月、日的橫線元素的margin屬性為0 6px，使它們與輸入框之間留有一定的空隙，同時，我們使用偽元素::before來給橫線元素添加了一個豎線形狀的樣式，并設置了background-color屬性為黑色，使它更加明顯。

最后，我們可以使用一些其他的CSS樣式來美化輸入框，例如添加圓角、邊框、背景顏色等。下面是一個完整的CSS代碼示例：

form {
display: flex;
align-items: center;
}
form input {
flex: 1;
padding: 8px 12px;
border: 1px solid #999;
border-radius: 4px;
}
form span {
margin: 0 6px;
}
form span::before {
content: "";
display: inline-block;
width: 2px;
height: 10px;
background-color: #333;
margin-right: 6px;
vertical-align: middle;
}

通過以上的代碼示例，我們可以輕松地實現一個美觀又實用的出生日期輸入框。