CSS3圓形印章是一種可以用來裝飾網頁的有趣效果。在這篇文章中,我們將會學習如何使用CSS3來制作一個漂亮的圓形印章。下面是一個簡單的例子:
.round-seal { width: 200px; height: 200px; border-radius: 50%; background-color: #AE3E3E; position: relative; font-family: Arial, Helvetica, sans-serif; font-size: 40px; font-weight: bold; color: #FFF; text-align: center; line-height: 200px; } .round-seal:before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; background-color: #FFF; z-index: 1; } .round-seal:after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; background-color: #AE3E3E; z-index: 2; } .round-seal span { position: relative; z-index: 3; }
代碼中的.round-seal類定義了整個印章的樣式,包括它的尺寸(width和height)、圓角半徑(border-radius)、背景顏色(background-color)和文本樣式(font-family、font-size、font-weight等)。同時,我們還為印章添加了一個相對定位(position: relative),以便在之后給它添加偽元素來實現印章效果。
接下來,我們在.round-seal類中添加了兩個偽元素:before和:after。它們分別表示印章的內邊框和外邊框。我們對它們采用了相同的圓角半徑(border-radius)和背景顏色(background-color),但是內邊框的顏色為白色(即#FFF),外邊框的顏色為印章的主體顏色(即#AE3E3E)。這樣一來,就形成了內邊框白色、外邊框顏色的效果。
最后,我們為印章中的文本添加了一個span元素,它用來設置文本樣式。我們為它添加了相對定位(position: relative)和一個較高層級(z-index),以使文本顯示在印章的中間位置。至此,我們就成功地創建了一個漂亮的圓形印章。
上一篇css li橫代碼
下一篇css li兩端對齊