home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

วิธีสร้าง Rounded และ Circular Images (รูปมุมมนและวงกลม) ด้วย CSS

ใช้ border-radius สร้างรูปภาพมุมมน (Rounded) หรือวงกลม (Circular) ได้ตามต้องการ

ตัวอย่างโค้ด

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> img {    border-radius: 50%;    width: 300px;    height: 300px; } </style> </head> <body> <h1>Rounded Images Example</h1> <img src="https://i.picsum.photos/id/271/400/400.jpg"> </body> </html>

Border-radius Values

คำเตือน

border-radius: 50% ต้องการ width = height ถ้ารูปไม่ใช่สี่เหลี่ยมจัตุรัส จะได้วงรี (Oval) แทน ใช้ object-fit: cover และ wrapper เพื่อครอปให้เป็นสี่เหลี่ยมจัตุรัสก่อน

ผลลัพธ์

รูปหิมะ/ภูเขา กลายเป็นวงกลมสมบูรณ์ 300x300px


ค่าผลลัพธ์
0มุมฉาก (Default)
4px - 12pxมุมมนเล็กน้อย (Card, Button)
50%วงกลม (ต้อง width=height)
50% / 50%Ellipse (วงรี) ถ้า width≠height
25% 50% 75% 100%มุมแต่ละมุมต่างกัน (TL, TR, BR, BL)