CSS วิธีทำ Mask แสดงกรอบรูปเป็นวงกลม

CSS วิธีทำ Mask แสดงกรอบรูปเป็นวงกลม

CSS วิธีทำ Mask แสดงกรอบรูปเป็นวงกลม


แนะนำวิธีทำรูปโปรไฟล์ หรือรูป Avatar บนเว็บไซต์ให้มีกรอบรูปวงกลมคล้าย ๆ การ mask โดยอาศัยความสามารถของ CSS ( Cascading Style Sheets ) ที่สำคัญเขียนโค๊ดแค่บรรทัดเดียว สามารถเรียกใช้งาน class บน img element หรือ div ได้เลย ลองไปดูกันครับว่า มีวิธีเขียนยังไงบ้าง

ส่วนของ CSS

ใช้เพียงคำสั่งเดียวครับ คือ border-radius ตั้งชื่อ class และกำหนดขนาดความมนของขอบรูปเป็นเปอร์เซ็น ลองมาดูตัวอย่างกันครับ เริ่มต้นลองทดสอบ ให้กำหนด border-radius:20%


กำหนด border-radius เท่ากับ 20%

.img-circle {
    border-radius: 20%;
}

ผลลัพธ์ที่ได้เมื่อเรียกใช้งานใน html แบบนี้

กำหนด border-radius เท่ากับ 50%

.img-circle {
    border-radius: 50%;
}

เป็นเทคนิค css ง่าย ๆ และเขียนโค๊ดสั้นมาก ลองเอาไปปรับใช้กับงานพัฒนาเว็บไซต์ดูครับ หวังว่าจะเป็นประโยชน์