ในกระบวนการสร้างหน้าเว็บ บางครั้งเราอาจจำเป็นต้องบรรลุผลจากมุมโค้งมน วิธีก่อนหน้านี้คือการตัดแบบร่างการออกแบบให้เป็นรูปภาพที่สามารถทำเป็นหน้าต่างๆ ได้อย่างง่ายดาย และใช้ภาพพื้นหลังหลายรูปเพื่อให้ได้มุมโค้งมน หลังจากการเกิดขึ้นของ CSS3 ไม่จำเป็นต้องมีปัญหาดังกล่าว CSS3 มีชุดคุณสมบัติเพื่อกำหนดเอฟเฟกต์มุมโค้งมนขององค์ประกอบดังที่แสดงด้านล่าง:
ค่าทางเลือกของฟังก์ชันข้างต้นจะแสดงในตารางต่อไปนี้:
border-radius ถูกใช้เพื่อสร้างเส้นขอบโค้งมน
ตัวอย่าง:
<html><head><style>div{width:300px;height:300px;border:1pxsolidred;border-radius:20px;}</style></head><body><div></div></ ร่างกาย></html>ผลการวิ่ง:
แต่ถ้าฉันตั้งค่ารัศมีเส้นขอบเป็น 150px มันจะกลายเป็นเส้นขอบวงกลม
<html><head><style>div{width:300px;height:300px;border:1pxsolidred;border-radius:150px;}</style></head><body><div></div></ ร่างกาย></html>ผลการวิ่ง:
เพื่อความสะดวก เพียงตั้งค่ารัศมีเส้นขอบเป็น 50% ผลก็เหมือนกัน
แต่ถ้าคุณต้องการวาดวงกลม ความกว้าง และความสูงต้องเท่ากัน
ในความเป็นจริง ค่าแอตทริบิวต์หลายค่าสามารถเชื่อมต่อได้หลังจากรัศมีเส้นขอบ สำหรับค่าแอตทริบิวต์เช่นเดียวกับค่าด้านบน ทั้งสี่มุมจะใช้ค่าเริ่มต้นเป็นค่าแอตทริบิวต์นี้ หากค่าแอตทริบิวต์ทั้งสี่มีความสัมพันธ์อย่างชัดเจนกับมุมทั้งสี่ วิธีการสัมพัทธ์คืออะไร? เริ่มจากมุมซ้ายบนแล้ววนตามเข็มนาฬิกา
ตัวอย่าง:
<html><head><style>div{width:300px;height:300px;border:1pxsolidblack;พื้นหลัง:rgb(0,162,255);border-radius:50px0px20px100px;}</style></head><body><div ></div></body></html>ผลการวิ่ง:
ตัวอย่างเช่น เรามาวาดไข่กัน:
<html><head><style>div{width:80px;height:100px;border:1pxsolidblack;พื้นหลัง:rgb(0,162,255);border-radius:40px40px40px40px/60px60px40px40px;}</style></head><body> <div></div></body></html>ผลการวิ่ง:
