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

<h3>CSS วิธีทำ Mask แสดงกรอบรูปเป็นวงกลม<&sol;h3>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong>CSS วิธีทำ Mask แสดงกรอบรูปเป็นวงกลม<&sol;strong><br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;แนะนำวิธีทำรูปโปรไฟล์ หรือรูป Avatar บนเว็บไซต์ให้มีกรอบรูปวงกลมคล้าย ๆ การ mask โดยอาศัยความสามารถของ CSS &lpar; Cascading Style Sheets &rpar; ที่สำคัญเขียนโค๊ดแค่บรรทัดเดียว สามารถเรียกใช้งาน class บน img element หรือ div ได้เลย ลองไปดูกันครับว่า มีวิธีเขียนยังไงบ้าง<&excl;--more--><&sol;p>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>ส่วนของ CSS <&sol;h4>&NewLine;<p>ใช้เพียงคำสั่งเดียวครับ คือ border-radius ตั้งชื่อ class และกำหนดขนาดความมนของขอบรูปเป็นเปอร์เซ็น ลองมาดูตัวอย่างกันครับ เริ่มต้นลองทดสอบ ให้กำหนด border-radius&colon;20&percnt;<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<strong>กำหนด border-radius เท่ากับ 20&percnt; <&sol;strong><&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&period;img-circle &lbrace; &NewLine; border-radius&colon; 20&percnt;&semi; &NewLine;&rcub;<&sol;pre>&NewLine;<p>ผลลัพธ์ที่ได้เมื่อเรียกใช้งานใน html แบบนี้<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " > &NewLine;<img class&equals;"img-circle" src&equals;"myAvatar&period;png"&sol;> &NewLine;<&sol;pre>&NewLine;<p><img width&equals;"200" src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;11&sol;วิธี-mask-รูปเป็นวงกลมด้วย-CSS-1&period;png" alt&equals;"วิธี-mask-รูปเป็นวงกลมด้วย-CSS" &sol;><&sol;p>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong>กำหนด border-radius เท่ากับ 50&percnt; <&sol;strong><&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&period;img-circle &lbrace; &NewLine; border-radius&colon; 50&percnt;&semi; &NewLine;&rcub;<&sol;pre>&NewLine;<p><img width&equals;"200" src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;11&sol;วิธี-mask-รูปเป็นวงกลมด้วย-CSS-2&period;png" alt&equals;"วิธี-mask-รูปเป็นวงกลมด้วย-CSS" &sol;><br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;เป็นเทคนิค css ง่าย ๆ และเขียนโค๊ดสั้นมาก ลองเอาไปปรับใช้กับงานพัฒนาเว็บไซต์ดูครับ หวังว่าจะเป็นประโยชน์<&sol;p>&NewLine;