今天我們來學習一下如何使用CSS畫一個對號。

.checkmark {
position: relative;
display: block;
width: 20px;
height: 20px;
border: 2px solid #27AE60;
border-radius: 50%;
}
.checkmark:after {
content: '';
position: absolute;
top: 2px;
left: 6px;
width: 5px;
height: 10px;
background-color: #27AE60;
transform: rotate(45deg);
}
.checkmark:before {
content: '';
position: absolute;
top: 6px;
left: 2px;
width: 11px;
height: 2px;
background-color: #27AE60;
transform: rotate(-45deg);
}

我們首先創建一個顯示區域，使用一個div元素，并給他一個類名為".checkmark"。

然后我們為".checkmark"設置邊框、圓角等樣式。

接下來，我們使用偽元素after和before來繪制對號的兩條線。

在".checkmark:after"中，我們設置了線的顏色、位置、大小和旋轉角度。

在".checkmark:before"中，我們同樣設置了線的顏色、位置、大小和旋轉角度。

最后，我們使用transform屬性來旋轉兩條線的方向，讓它們成為一個完整的對號。

現在我們已經成功地使用CSS畫出了一個漂亮的對號，可以在需要的地方使用它來增加頁面的視覺效果。