CSS3是前端開發(fā)中不可或缺的一部分，它可以讓我們更加方便地實現(xiàn)各種效果，比如畫出對號。下面我們就來講解如何使用CSS3來畫出對號。
.checkmark {
position: relative;
width: 20px;
height: 20px;
border-radius: 50%;
background: transparent;
border: 2px solid #333;
}
.checkmark:before {
content: "";
position: absolute;
top: 50%;
left: -12px;
width: 6px;
height: 12px;
transform: rotate(45deg);
border: 2px solid #333;
border-top: none;
border-right: none;
}
.checkmark:after {
content: "";
position: absolute;
top: 0;
left: -8px;
width: 16px;
height: 2px;
transform: rotate(45deg);
background: #333;
}我們首先創(chuàng)建一個
元素，并且給它添加一個類名.checkmark。然后我們設(shè)置它的寬度和高度都為20px，邊框半徑為50%，背景為透明色，邊框為2px實線的黑色。這樣就創(chuàng)建出了一個空心圓圈的形狀。
接下來，我們利用偽元素:before來創(chuàng)建對號的斜線條。我們給它設(shè)置絕對定位，并將它放到空心圓圈的左上角處。我們將它的寬度設(shè)為6px，高度設(shè)為12px，并將它旋轉(zhuǎn)45度。然后我們設(shè)置它的邊框為2px實線，讓它的頂部和右側(cè)邊框為透明，這樣它就成了一個斜著的直線條。
最后，我們利用偽元素:after來創(chuàng)建對號的橫線條。我們同樣給它設(shè)置絕對定位，并將它放到空心圓圈的左側(cè)。我們將它的寬度設(shè)為16px，高度設(shè)為2px，并將它旋轉(zhuǎn)45度。然后設(shè)置它的背景顏色為黑色，這樣就形成了對號的形狀了。
使用CSS3畫出對號是非常簡單的，只需要利用偽元素:before和:after，通過不同的定位和旋轉(zhuǎn)來實現(xiàn)。相比于使用圖片來實現(xiàn)對號的效果，使用CSS3還能提高頁面的加載速度，優(yōu)化用戶的體驗。
上一篇beego json小寫
下一篇mysql取分大小寫嗎