CSS中可以使用border-radius
屬性來(lái)繪制圓形,要畫(huà)兩個(gè)相鄰的圓形,可以使用兩個(gè)div元素,并將它們的border-radius
屬性都設(shè)置為50%,這樣它們就會(huì)成為兩個(gè)相鄰的圓形。
下面是一個(gè)示例代碼:
<div style="border: 1px solid #000; border-radius: 50%; width: 100px; height: 100px; position: relative; left: 50px;"></div> <div style="border: 1px solid #000; border-radius: 50%; width: 100px; height: 100px; position: relative; left: 150px;"></div>
在這個(gè)示例中,兩個(gè)div元素都設(shè)置了border
和border-radius
屬性,分別表示邊框和圓形的半徑。width
和height
屬性用于設(shè)置div元素的大小,而position
和left
屬性則用于設(shè)置div元素的位置。
通過(guò)調(diào)整left
屬性的值,我們可以控制兩個(gè)圓形之間的間距,在上面的示例中,我將第二個(gè)div元素的left
屬性設(shè)置為150px,這樣它就會(huì)出現(xiàn)在***個(gè)div元素的右側(cè),兩者之間有一定的間距。
這只是一個(gè)簡(jiǎn)單的示例,你可以根據(jù)自己的需求進(jìn)行調(diào)整,使用CSS繪制兩個(gè)相鄰的圓形并不是一件難事,只需要掌握一些基本的CSS屬性即可。