数据结构
网络
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 次浏览
广告