CSS是前端開發中最重要的技能之一,一些看似簡單的效果如問號效果,也可以通過CSS輕松實現。下面就來介紹下如何用CSS實現問號效果。
.question { position: relative; display: inline-block; width: 20px; height: 20px; border-radius: 50%; background-color: grey; } .question:before { content: "?"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: bold; font-size: 16px; color: white; }
以上代碼,首先我們先定義了一個樣式名為question的元素,這個元素設置了一些基礎屬性,如寬高、邊框圓角和背景顏色等。接下來,我們使用偽類:before來定義問號的內容。在:before中使用content屬性來插入問號的文本,然后使用絕對定位和transform屬性來讓問號垂直居中并水平居中。
最后我們還可以根據需求對問號進行自定義,如調整字體大小、顏色、背景顏色等,在保證代碼結構基礎上,可以根據實際需要進行自由發揮。