CSS圖形外面弄成圓的步驟

1、繪制圓形：我們需要使用CSS的border-radius屬性來(lái)繪制一個(gè)圓形，這個(gè)屬性可以將一個(gè)元素的四個(gè)角都設(shè)置為圓形，從而實(shí)現(xiàn)一個(gè)完整的圓形效果，我們可以設(shè)置一個(gè)div元素的border-radius為50%，這樣這個(gè)div就會(huì)變成一個(gè)圓形。

div {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #333;
}

2、添加邊框：我們可以給這個(gè)圓形添加邊框，CSS的border屬性可以用來(lái)設(shè)置邊框的樣式、寬度和顏色，我們可以設(shè)置一個(gè)2px寬的邊框，顏色為白色。

div {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #333;
    border: 2px solid #fff;
}

3、添加陰影：為了讓這個(gè)圓形更加突出，我們可以給它添加一些陰影，CSS的box-shadow屬性可以用來(lái)設(shè)置元素的陰影效果，我們可以設(shè)置一個(gè)5px的陰影，顏色為灰色。

div {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #333;
    border: 2px solid #fff;
    box-shadow: 5px 5px 5px #777;
}

4、調(diào)整樣式：我們可以根據(jù)需要調(diào)整這個(gè)圓形的樣式，比如改變背景顏色、邊框顏色和陰影顏色等，這樣，我們就可以得到一個(gè)外觀更加美觀的圓形了。