我們經常需要在網站的表單和菜單中使用對號,這時候使用CSS畫出對號非常方便。下面是一個使用CSS畫出對號的方法:
.checkmark { position: relative; width: 20px; height: 20px; border: 2px solid #999; border-radius: 50%; box-sizing: border-box; } .checkmark:after { content: ""; position: absolute; left: 6px; top: 1px; width: 5px; height: 10px; border: solid #999; border-width: 0 2px 2px 0; transform: rotate(45deg); }
上面的CSS代碼定義了一個類名為“checkmark”的元素,其形狀為一個圓形,并且有一個灰色的2像素邊框。在該元素的偽元素“:after”中,我們使用CSS屬性畫出了對號,這里我們使用了CSS變換屬性“transform: rotate(45deg);”,使得對號旋轉了45度,與圓形元素的邊界對齊,形成完整的對號。
我們可以在HTML中添加上面的元素:
<div class="checkmark"></div>
然后,在瀏覽器中預覽,就可以看到一個帶有對號的圓形了。
上一篇css 畫凸字形狀
下一篇mysql添加數據到新表