الزوايا 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 يُستخدم لضبط جميع خمسة عشر خصائص border-*-*-radius كخصائص مختصرة.
border-top-left-radius تحديد شكل الحافة العلوية اليسرى
border-top-right-radius تحديد شكل الحافة العلوية اليمنى
border-bottom-right-radius تحديد شكل الحافة السفلية اليمنى
border-bottom-left-radius تحديد شكل الحافة السفلية اليسرى