CSS

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

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

التاريخ

28 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

1349

المواضيع

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

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;
}
مصطلحات الدرس
Rounded
Rounded

مدور / دائري

Corners
Corners

زوايا

Radius
Radius

منتصف القطر / الكوع الجانبي

Property
Property

خاصية

Specify
Specify

تحديد

Each Corner
Each Corner

كل زاوية / ركن

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
HTML
HTML

Hypertext Markup Language

لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
link
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات