CSS โค้นรอบ

CSS โค้นรอบ

ผ่าน CSS border-radius รูปแบบ 'มุมกลม' ของอนุภาคที่สามารถทำได้โดย 'property'

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 แอตตริบุตรนี้สามารถรับค่า 1 ถึง 4 ค่าตามกฎนี้:

ค่าสี่ - 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 ใช้เพื่อตั้งค่าความกลมของทั้งสี่ตัวบรรทัดของ border-*-*-radius ด้วยความยาวชั้นย่อ。
border-top-left-radius กำหนดรูปร่างขอบทางด้านบนซ้าย
border-top-right-radius กำหนดรูปร่างขอบทางด้านบนขวา
border-bottom-right-radius กำหนดรูปร่างขอบทางด้านล่างขวา
border-bottom-left-radius กำหนดรูปร่างของขอบทางด้านล่างซ้าย