CSS3的圓形徽章是一個非常方便的功能,可以用于展示產品特色,比如售價,折扣,或者商品狀態等等。
要創建一個圓形徽章,可以通過以下步驟實現。
.badge { display: inline-block; width: 50px; height: 50px; line-height: 50px; border-radius: 50%; background-color: #f00; text-align: center; color: #fff; }
以上代碼中,設置了一個.circle的class,用于定義圓形的大小、邊框樣式、背景顏色和字體顏色等。
在HTML代碼中,可以像下面這樣使用圓形徽章:
<span class="badge">8.5折</span> <span class="badge">新品</span> <span class="badge">限時搶購</span>
以上標簽將顯示三個不同的圓形徽章,分別顯示8.5折、新品和限時搶購的內容。
現在,你已經學會了如何使用CSS3創建圓形徽章。希望這篇文章能夠對你有所幫助,歡迎在評論區發表你的看法和想法。