CSS 如何在框框內打勾？
在我們的 Web 開發過程中，很多時候需要用到打勾的效果，比如勾選框、復選框等。這個效果可以使用 CSS 來實現，這里就來講講如何使用 CSS 在框框內打勾。
首先，我們需要一個帶有邊框樣式的元素，例如：
```html
選項
```
然后，我們可以通過 CSS 的偽元素來實現打勾的效果，偽元素的選擇器是 `::before` 和 `::after`。我們可以通過 `content` 屬性來設置偽元素的內容，例如：
```css
.checkbox::before {
content: '';
display: inline-block;
width: 10px;
height: 10px;
border: 1px solid #999;
margin-right: 5px;
}
```
這段 CSS 代碼會為 `.checkbox` 元素添加一個 `::before` 偽元素，它的內容是一個空字符串，使用 `display: inline-block` 讓它可以和文字在同一行顯示，然后設置寬度和高度以及邊框樣式和顏色。
接下來，我們需要為偽元素添加樣式來實現打勾的效果：
```css
.checkbox::before {
content: '';
display: inline-block;
width: 10px;
height: 10px;
border: 1px solid #999;
margin-right: 5px;
}
.checkbox::after {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border: 1px solid #999;
border-top: none;
border-right: none;
transform: rotate(45deg);
margin-left: -8px;
margin-top: 1px;
}
```
這段 CSS 代碼會添加一個 `::after` 偽元素，并且使用 `transform: rotate(45deg)` 使它旋轉 45 度角，從而形成打勾的效果。
最終，我們就可以得到一個框框內打勾的效果了，完整的代碼如下：
```css
.checkbox::before {
content: '';
display: inline-block;
width: 10px;
height: 10px;
border: 1px solid #999;
margin-right: 5px;
}
.checkbox::after {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border: 1px solid #999;
border-top: none;
border-right: none;
transform: rotate(45deg);
margin-left: -8px;
margin-top: 1px;
}
```
以上就是 CSS 如何在框框內打勾的方法，希望對大家有所幫助。下一篇css如何可視化