CSS圓圈中加上一個“+”符號是一個常見的設計需求,這可以用CSS偽元素來實現。通過在偽元素中設置邊框屬性,就可以生成一個圓形,再通過設置內容內容屬性來加上加號。
.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; }
上述代碼中,我們創建一個類名為“circle”的容器,設置它的寬度、高度和圓角屬性,背景色為白色,邊框寬度為2像素,顏色為黑色。接下來,我們在偽元素“::before”中,設置它的內容為“+”,并通過absolute定位將加號移到圓圈正中央,通過設置字體的大小和粗細來保證加號在圓圈中央處的居中性。
以上是在一個圓圈中添加一個加號的基本方式,如果要改變圓圈的顏色、大小等屬性,只需要對.circle進行相應的樣式設置即可。