الزوايا CSS

الزوايا CSS

من خلال CSS border-radius الصفات، يمكنها تحقيق أي عنصر

خصائص CSS border-radius

CSS border-radius تعرف الخاصية زوايا العناصر.

نصيحة:يمكنك استخدام هذه الخاصية لإضافة زوايا مستديرة للعناصر!

هناك ثلاثة أمثلة:

1. زوايا مستديرة لأعمدة تحتوي على لون خلفية معين:

زوايا مستديرة!

2. زوايا مستديرة لأعمدة تحتوي على حواف:

زوايا مستديرة!

3. زوايا مستديرة لأعمدة تحتوي على صورة خلفية:

زوايا مستديرة!

هذا هو الكود:

مثال

#rcorners1 {
  border-radius: 25px;
  الخلفية: #73AD21;
  الملء: 20px; 
  العرض: 200px;
  الارتفاع: 150px; 
}
#rcorners2 {
  border-radius: 25px;
  border: 2px solid #73AD21;
  الملء: 20px; 
  العرض: 200px;
  الارتفاع: 150px; 
}
#rcorners3 {
  border-radius: 25px;
  background: url(paper.gif);
  background-position: left top;
  background-repeat: repeat;
  الملء: 20px; 
  العرض: 200px;
  الارتفاع: 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;
  الخلفية: #73AD21;
  الملء: 20px; 
  العرض: 200px;
  الارتفاع: 150px; 
}
#rcorners2 {
  border-radius: 15px 50px 30px;
  الخلفية: #73AD21;
  الملء: 20px; 
  العرض: 200px;
  الارتفاع: 150px; 
}
#rcorners3 {
  border-radius: 15px 50px;
  الخلفية: #73AD21;
  الملء: 20px; 
  العرض: 200px;
  الارتفاع: 150px; 
}
#rcorners4 {
  border-radius: 15px;
  الخلفية: #73AD21;
  الملء: 20px; 
  العرض: 200px;
  الارتفاع: 150px; 
}

جرب بنفسك

يمكنك أيضًا إنشاء زوايا مستديرة:

مثال

#rcorners1 {
  border-radius: 50px / 15px;
  الخلفية: #73AD21;
  الملء: 20px; 
  العرض: 200px;
  الارتفاع: 150px; 
}
#rcorners2 {
  border-radius: 15px / 50px;
  الخلفية: #73AD21;
  الملء: 20px; 
  العرض: 200px;
  الارتفاع: 150px; 
}
#rcorners3 {
  border-radius: 50%;
  الخلفية: #73AD21;
  الملء: 20px; 
  العرض: 200px;
  الارتفاع: 150px;
}

جرب بنفسك

خصائص الزوايا الكروية في CSS

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