CSS定位寫同心圓的步驟

1、繪制外圓：我們需要繪制一個外圓，這可以通過使用CSS的border-radius屬性來實(shí)現(xiàn)，將元素的邊框設(shè)置為圓形，我們可以給div元素添加以下樣式來繪制一個外圓：

div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

2、繪制內(nèi)圓：我們需要繪制一個內(nèi)圓，內(nèi)圓可以通過添加一個嵌套的div元素并設(shè)置其border-radius屬性為0來實(shí)現(xiàn)，我們可以給內(nèi)部的div元素添加以下樣式來繪制一個內(nèi)圓：

div {
  width: 100px;
  height: 100px;
  position: relative;
}
div::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

3、調(diào)整位置：我們需要調(diào)整內(nèi)圓的位置，使其位于外圓的中心，這可以通過設(shè)置內(nèi)圓的position屬性為absolute，并使用top和left屬性來調(diào)整其位置來實(shí)現(xiàn)，我們可以將內(nèi)圓的樣式修改為以下樣式來調(diào)整其位置：

div::before {
  content: "";
  position: absolute;
  top: 25%; /* 修改這里來調(diào)整內(nèi)圓的位置 */
  left: 25%; /* 修改這里來調(diào)整內(nèi)圓的位置 */
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

我們已經(jīng)使用CSS定位寫出了一個同心圓，你可以根據(jù)需要調(diào)整外圓和內(nèi)圓的大小以及位置。