วิธีการ - แวดวง
เรียนรู้วิธีสร้างวงกลมว่างด้วย CSS
วิธีสร้างแวดวง
ขั้นตอนที่ 1) เพิ่ม HTML:
ตัวอย่าง
<span class="dot"></span>
<span class="dot"></span>
<span
class="dot"></span>
<span class="dot"></span>
ขั้นตอนที่ 2) เพิ่ม CSS:
หากต้องการสร้างวงกลม ให้ใช้คุณสมบัติ border-radius และตั้งค่าเป็น 50% จากนั้นรวมคุณสมบัติความสูงและความกว้างเข้ากับค่าที่ตรงกัน:
ตัวอย่าง
.dot {
height: 25px;
width: 25px;
background-color: #bbb;
border-radius: 50%;
display:
inline-block;
}