在網頁設計中，CSS帶邊框對勾是一種常見的線條效果，它可以讓網頁更美觀和有吸引力。下面將介紹如何使用CSS實現帶邊框對勾的效果。
首先，在HTML文件中定義一個div元素，用于裝載文本和對勾，我們可以設置div元素的大小和背景顏色：

<div class="checkmark">
<p>已完成</p>
</div>

然后，使用CSS設置div元素的邊框和圓角。可以使用border屬性設置邊框的樣式，例如solid、dashed或dotted等，還可以設置邊框寬度和顏色。border-radius屬性可以設置圓角大小，使元素更加美觀。

.checkmark {
display: inline-block;
border: 2px solid #000;
padding: 10px 20px;
border-radius: 5px;
}

接著，使用CSS繪制對勾圖案。可以使用偽元素before或after來添加對勾，設置元素的大小和位置，使用transform屬性調整角度和位置:

.checkmark::before {
content: '';
display: block;
width: 6px;
height: 10px;
border: 2px solid #000;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
position: absolute;
top: 50%;
left: 25%;
margin-top: -6px;
margin-left: -3px;
}

最后，我們需要將對勾和div元素進行組合，將對勾添加到div元素中，以此來實現帶邊框對勾的效果。

.checkmark {
position: relative;
}
.checkmark::before {
content: '';
display: block;
...
}
.checkmark p {
margin: 0;
padding-right: 20px;
}

以上，就是使用CSS實現帶邊框對勾效果的示例代碼。通過對CSS樣式的設置，我們可以創建出各種樣式各異的帶邊框對勾效果，使網頁更加生動和有趣。