CSS หัวโมงโหลด

CSS หัวโมงโหลด

ผ่านทาง CSS border-radius คุณสมบัตินี้สามารถทำให้ส่วนประกอบใดก็ได้มีรูปแบบ 'โค้งมุม' ได้

CSS border-radius นิยาม

CSS border-radius คุณสมบัตินี้กำหนดเส้นรัศมีของมุมขององค์ประกอบ。

คำเตือน：คุณสามารถใช้คุณสมบัตินี้เพื่อเพิ่มโค้งรอบเส้นขององค์ประกอบ!

ที่นี้มีตัวอย่างสามตัว:

1. มุมโค้งขององค์ประกอบที่มีสีพื้นหลังที่กำหนด:

โค้งรอบเส้น!

2. มุมโค้งขององค์ประกอบที่มีเส้นขอบ:

โค้งรอบเส้น!

3. มุมโค้งขององค์ประกอบที่มีภาพพื้นหลัง:

โค้งรอบเส้น!

นี่คือรหัสโค้ด:

ตัวอย่าง

#rcorners1 {
  border-radius: 25px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 25px;
  background: url(paper.gif);
  background-position: left top;
  background-repeat: repeat;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

ลองทดลองด้วยตัวเอง

คำเตือน：border-radius คุณสมบัตินี้เป็นรูปภาพย่อของคุณสมบัติดังนี้：

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

CSS border-radius - กำหนดมุมทุกด้าน

border-radius คุณสมบัติสามารถรับค่าจากหนึ่งถึงสี่ค่า。กฎที่ใช้งานดังนี้：

ค่าสี่ - border-radius: 15px 50px 30px 5px;（ใช้ตามลำดับต่อไปนี้: มุมบนซ้าย、มุมบนขวา、มุมล่างขวา、มุมล่างซ้าย）：

ค่าสาม - border-radius: 15px 50px 30px;（ค่าแรกใช้สำหรับมุมบนซ้าย，ค่าที่สองใช้สำหรับมุมบนขวาและล่างซ้าย，ค่าที่สามใช้สำหรับมุมล่างขวา）：

ค่าสอง - border-radius: 15px 50px;（ค่าแรกใช้สำหรับมุมบนซ้ายและล่างขวา，ค่าที่สองใช้สำหรับมุมบนขวาและล่างซ้าย）：

ค่าเดียว - border-radius: 15px;（ค่านี้ใช้สำหรับทั้งสี่มุม，มุมโค้งเหมือนกัน）：

นี่คือรหัสโค้ด:

ตัวอย่าง

#rcorners1 {
  border-radius: 15px 50px 30px 5px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 15px 50px 30px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 15px 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners4 {
  border-radius: 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

ลองทดลองด้วยตัวเอง

คุณยังสามารถสร้างมุมเขม่าได้:

ตัวอย่าง

#rcorners1 {
  border-radius: 50px / 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 15px / 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 50%;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px;
}

ลองทดลองด้วยตัวเอง

คุณสมบัติโค้งรอบเส้นของ CSS

คุณสมบัติ บรรยาย
border-radius ใช้เพื่อตั้งค่ารูปทรงโค้งของทั้งสี่รูปทรงบอร์เดอร์-*-*-radius โดยทางการสั้น。
border-top-left-radius กำหนดรูปทรงของขอบบนริมฝั่งซ้ายบน
border-top-right-radius กำหนดรูปทรงของขอบบนริมฝั่งขวาบน
border-bottom-right-radius กำหนดรูปทรงของขอบบนริมฝั่งล่างขวา
border-bottom-left-radius กำหนดรูปทรงของขอบบนริมฝั่งซ้ายล่าง