CSS里面圓圈打鉤是一種常見的UI設計元素,可以用來表示復選框或者單選框已經被選中。下面是一種實現這個效果的CSS代碼。
/* 創建一個圓圈 */ .circle { width: 20px; height: 20px; border-radius: 50%; border: 1px solid #ccc; } /* 在圓圈里面打一個勾 */ .circle:before { content: '\2713'; display: block; font-size: 16px; color: #fff; text-align: center; line-height: 20px; } /* 設置圓圈的背景顏色 */ .circle.checked { background-color: #007bff; } /* 設置勾在選中時的顏色 */ .circle.checked:before { color: #fff; }
上面的代碼創建了一個圓圈,并在其中使用:before偽元素添加了一個勾。為了讓勾顯示在圓圈中央,我們設置了text-align:center和line-height:20px。當給圓圈添加class為checked時,我們設置了它的背景顏色,并將勾的顏色改為白色。
這里需要注意,在:before中使用\2713來表示勾的unicode編碼,這個編碼在大多數現代瀏覽器中都是被支持的。
下一篇css里面圖片路徑