วิธีการ - รูปภาพอวาตาร์
เรียนรู้วิธีสร้างภาพอวาตาร์ด้วย CSS
วิธีสร้างภาพอวาตาร์
ขั้นตอนที่ 1) เพิ่ม HTML:
ตัวอย่าง
<img src="avatar.png" alt="Avatar" class="avatar">
ขั้นตอนที่ 2) เพิ่ม CSS:
ตั้งค่าการจับคู่height
ที่width
ดูดีและใช้border-radius
คุณสมบัติเพื่อเพิ่มมุมโค้งมนให้กับรูปภาพ 50% จะทำให้ภาพเป็นวงกลม:
ตัวอย่าง
.avatar {
vertical-align: middle;
width: 50px;
height: 50px;
border-radius: 50%;
}
ไปที่ บทช่วย สอนรูปภาพ CSSเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการจัดรูปแบบรูปภาพ