奧運五環圖形是奧林匹克運動會的象征之一,通過使用CSS編程,可以輕松地繪制出這個圖形。
.circle { width: 100px; height: 100px; border-radius: 50%; position: relative; } .circle.blue { background-color: blue; } .circle.yellow { background-color: yellow; left: -50px; top: 0; } .circle.black { background-color: black; left: -25px; top: 50px; } .circle.green { background-color: green; left: 25px; top: 50px; } .circle.red { background-color: red; left: 50px; top: 0; }
以上代碼的意思是,首先創建一個類名為“circle”的元素,設置寬度和高度為100像素,邊框的圓角半徑為50%。接著分別設置每個圓環的背景顏色,并將這些圓環分別相對于父元素定位。
在HTML代碼中,只需要創建一個包含五個類名為“circle”的div元素,根據不同的類名設置不同的背景顏色,就可以實現繪制奧運五環圖形的效果。
下一篇用jq添加css