如何建立具有兩個邊框的圓形
響應式地將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中文網其他相關文章!