CSS打勾的框是一種常見的界面元素，通常用于表示某個選項已被選中或某項任務已完成。下面我們將介紹如何使用CSS實現這種打勾的效果。

.checkbox {
display: inline-block;
position: relative;
width: 30px;
height: 30px;
border: 1px solid #666;
border-radius: 3px;
box-sizing: border-box;
cursor: pointer;
}
.checkbox::before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 20%;
transform: translate(-50%, -50%) rotate(45deg);
width: 10px;
height: 20px;
border: 2px solid #fff;
border-top: none;
border-right: none;
}
.checkbox.checked::before {
border-color: #666;
}

以上代碼實現了一個基本的checkbox樣式，包括邊框、圓角、大小、鼠標樣式等。其中，::before偽元素用于實現打勾的圖形，通過旋轉45度并隱藏部分邊框來實現。當元素被選中（或被添加class為checked）時，我們將打勾的顏色改為灰色（或其他合適的顏色）。

這種打勾的樣式可以自由地應用到各種元素中，如單選框、復選框、開關等。你也可以根據具體情況進一步自定義樣式，例如改變大小、顏色、動畫效果等。