CSS是網頁設計中非常重要的一部分,而對號CSS可以用于為網頁添加對號樣式。下面是一些可以使用的對號CSS樣式:
.checkmark { position: relative; display: inline-block; width: 22px; height: 22px; vertical-align: middle; border-radius: 50%; border: 2px solid #6fbd2b; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #6fbd2b; } .checkmark:after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: #6fbd2b; transform: translate(-50%, -50%); opacity: 0; } .checkmark.checked:after { opacity: 1; }
可以使用這個樣式來為網頁中需要對號的元素添加對號。首先,定義一個類名為“checkmark”的樣式,設置元素的位置、大小、邊框和陰影。接著,定義一個偽元素“after”,利用CSS3的transform屬性將其置于元素中心。將這個偽元素的不透明度設為0,表示初始狀態下不顯示對號,當添加類名“checked”時,將其不透明度設為1,即顯示對號。
使用方法:
<div class="checkmark"></div>
這將在頁面中顯示一個有邊框和陰影的圓形容器。要在此圓形容器內添加對號,只需在其上添加類名“checked”即可:
<div class="checkmark checked"></div>
這將在圓形容器中心顯示一個綠色的對號。
上一篇導航自定義css代碼
下一篇導入css樣式用什么