資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
JavaScript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚學
法學如何透過 CSS 建立空心圓？
要在網頁上建立空心圓，請使用 border-radius 屬性。要對齊網頁上的多個圓，請將 display 屬性設定為 inline-block。我們來看看如何使用 HTML 和 CSS 建立空心圓。
建立圓形容器
為我們要在網頁上建立的多個圓設定一個 div 容器 −
<div> <span class="circle"></span> <span class="circle"></span> <span class="circle"></span> <span class="circle"></span> </div>
建立空心圓
將 border-radius 屬性與值 50% 結合使用可建立一個圓。要正確對齊圓形，請使用 display 屬性，其值應為 inline-block −
.circle {
height: 25px;
width: 25px;
background-color: rgb(52, 15, 138);
border-radius: 50%;
display: inline-block;
}
給圓形著色
使用 :nth-of-type 選擇器，我們已將紅色背景顏色設定到了每一個交替的圓 −
div :nth-of-type(2n) {
background-color: red;
}
示例
要透過 CSS 建立空心圓，程式碼如下 –
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
}
.circle {
height: 25px;
width: 25px;
background-color: rgb(52, 15, 138);
border-radius: 50%;
display: inline-block;
}
div :nth-of-type(2n) {
background-color: red;
}
</style>
</head>
<body>
<h1>Round dots example</h1>
<div>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
</div>
</body>
</html>
更新於：2023 年 12 月 14 日
793 次瀏覽
廣告