首頁  >  文章  >  web前端  >  如何使用 CSS 建立具有兩個邊框的圓形?

如何使用 CSS 建立具有兩個邊框的圓形?

Mary-Kate Olsen
Mary-Kate Olsen原創
2024-11-02 05:31:02785瀏覽

How to Create a Circle with Two Borders Using CSS?

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

響應式地將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:

<code class="html"><div class="circle">
  <div class="inner"></div>
</div></code>

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

<code class="css">div.circle {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

以上是如何使用 CSS 建立具有兩個邊框的圓形?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn