| 1.代码如下: HTML <div class="circle"></div> CSS .circle {
border-radius: 50%;
width: 2rem;
height: 2rem;
background: #333;
} 实践: circle.html <!DOCTYPE html>
<html>
<head>
<title>css 绘制一个圆</title>
<style type="text/css">
.circle {
border-radius: 50%;
width: 4rem;
height: 4rem;
background: #333;
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html> 效果如下: 
实现一个圆附着在容器边框: circle-on-box.html <!DOCTYPE html>
<html>
<head>
<title>css 绘制一个圆</title>
<style type="text/css">
#rootApp {
display: flex;
} .app {
width: 265px;
height: 723px;
border: 1px solid #D8DCE2;
border-radius: 4px;
border-radius: 4px; position: relative;
} .circle {
border: 3px solid #2765CF;
border-radius: 50%;
width: 60px;
height: 60px;
background: #fff; display: flex;
justify-content: center;
align-items: center; font-size: 16px;
color: #2765CF; position: absolute;
bottom: 33px;
right: -34px; z-index: 1;
}
</style>
</head>
<body>
<div id="rootApp">
<div class="app">
<div class="circle">FAQ</div>
</div>
<div class="app">
<div class="circle">FAQ</div>
</div>
<div class="app">
<div class="circle">FAQ</div>
</div>
</div>
</body>
</html> 效果如下: 
效果已经实现, 代码思路: 制作一个圆+绝对定位 后续补充 ... |