在网页设计中，打勾框是一种常见的元素。在 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 属性进行定位和旋转。最后，通过设置透明度来控制勾选状态的显示。

通过以上代码，我们可以快速地创建出一个打勾框的效果，使页面功能更加完整，视觉效果更加优美。