如何創建具有兩個邊框的圓形

響應式地將div 樣式化為具有兩個邊框的圓形可以使用CSS 來完成。提供的原始圓形 div CSS 可以修改以建立所需的效果：

div.circle {
  width: 90%;
  height: 0;
  padding-bottom: 90%;
  margin: auto;
  float: none;
  border-radius: 50%;
  background: pink;
  border: 1px solid green;
  box-shadow: 0 0 0 5px red; /* Adds a second red border */
}

這裡，box-shadow 屬性用於在圓周圍建立第二個邊框。值 0 0 0 5px 定義陰影的偏移、模糊和擴散，而紅色指定邊框的顏色。

問題中提到的內部 div 方法可以透過在圓圈 div:

內部 div 可以使用背景顏色設定樣式，並使用 flexbox 垂直對齊：

div.circle {
  display: flex;
  align-items: center;
  justify-content: center;
}

div.inner {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: blue;
}