CSS是一種用于設計網頁樣式的語言,它可以實現很多不同的效果,比如讓文字變成紅色、讓圖片變成圓形等等。今天我們來學習如何用CSS打出平方2!
.square { font-size: 20px; height: 30px; line-height: 30px; text-align: center; width: 30px; } .square:before { content: "2"; font-size: 12px; margin-right: -5px; position: relative; top: -10px; }
上面的代碼可以實現一個平方2的效果。首先我們創建了一個CSS選擇器.square,來設置平方2的樣式。我們用了一些基本屬性,比如font-size、height、line-height和width,來控制方框的大小和字體的大小和位置。
然后我們用:before偽元素來添加一個2的符號,用content來設置,用font-size來控制它的大小,用margin-right來控制符號和方塊之間的距離,用top來控制符號的位置。
最后,我們只需要在HTML中創建一個帶有.square類的元素,就可以得到一個漂亮的平方2。