在網頁設計中，打勾框是一種常見的元素。在 CSS 中，我們可以使用偽元素 (:before 和 :after) 來實現打勾框的效果。

/* 基本樣式 */
.checkbox {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #ccc;
border-radius: 4px;
}
/* 勾選樣式 */
.checkbox:before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 30%;
width: 5px;
height: 10px;
border: solid #007bff;
border-width: 0 2px 2px 0;
transform: translateY(-50%) rotate(45deg);
opacity: 0;
}
/* 動態效果 */
.checkbox input:checked ~ :before {
opacity: 1;
}

上面的代碼中，我們創建了一個名為 .checkbox 的類，它用于設置打勾框的基本樣式。接著，使用偽元素 :before 來添加打勾的樣式。在 :before 中，我們使用 content 屬性來創建一個空元素，并使用 position 和 transform 屬性進行定位和旋轉。最后，通過設置透明度來控制勾選狀態的顯示。

通過以上代碼，我們可以快速地創建出一個打勾框的效果，使頁面功能更加完整，視覺效果更加優美。