CSS

CSS Rounded Corners
الزوايا المدورة في لغة CSS

سوف تتعلم في هذا الدرس طريقة rounded corners الزوايا المدورة للعناصر سواء صور أو div أو اي عنصر له أبعاد وله border في لغة CSS.

التاريخ

28 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

1883

المواضيع

24
الشروحات chevron_left CSS Rounded Corners chevron_left CSS

CSS Rounded Corners
الزوايا المدورة في لغة CSS

</> CSS Rounded Corners
الزوايا المدورة في لغة CSS

عن طريق خاصية border-radius في لغة CSS يمكننا عمل دوران لزوايا العناصر ويجب أن يكون للعنصر border حتي يمكن تدويرة.

CSS Rounded Corners
.item
{
  flex:1;
  margin:20px;
  height:150px;
  border:#d63031 3px solid;
  background-color: #2196F3;
  border-radius:25px;
}

</> CSS Rounded Corners specify each corner
زوايا المدورة مختلفة لكل جانب في لغة CSS

يمكن عمل دوران لكل زاوية من زاويا العنصر وذلك عند وضع قيمة مختلفة لكل زاوية عن طريق خاصية border-radius x في لغة CSS.

ExampleCSS Rounded Corners specify each corner
ExampleCSS Rounded Corners specify each corner
.item1
{
  border-radius:50px 0 50px 0;
}
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات