CSS圓圈中加上一個“+”符號是一個常見的設(shè)計需求,這可以用CSS偽元素來實現(xiàn)。通過在偽元素中設(shè)置邊框?qū)傩裕涂梢陨梢粋€圓形,再通過設(shè)置內(nèi)容內(nèi)容屬性來加上加號。
.circle { position: relative; width: 40px; height: 40px; border-radius: 50%; background-color: #fff; border: 2px solid #000; } .circle::before { content: "+"; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; font-weight: bold; }
上述代碼中,我們創(chuàng)建一個類名為“circle”的容器,設(shè)置它的寬度、高度和圓角屬性,背景色為白色,邊框?qū)挾葹?像素,顏色為黑色。接下來,我們在偽元素“::before”中,設(shè)置它的內(nèi)容為“+”,并通過absolute定位將加號移到圓圈正中央,通過設(shè)置字體的大小和粗細(xì)來保證加號在圓圈中央處的居中性。
以上是在一個圓圈中添加一個加號的基本方式,如果要改變圓圈的顏色、大小等屬性,只需要對.circle進(jìn)行相應(yīng)的樣式設(shè)置即可。