Arabic Knowledge blog مدونة المعرفة العربية : How to Make image photo rounded borders in HTML css كيف جعل الصورة ذات زوايا حواف أطراف دائرية باستخدام الأنماط الانسيابية

How to Make image photo rounded borders in HTML css كيف جعل الصورة ذات زوايا حواف أطراف دائرية باستخدام الأنماط الانسيابية

ماهي خاصية border-radius? وكيف استخدمها مع الصور؟

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

أولا أضف الصورة او الصور التي تريد عمل إطار ذات حواف دائرية باستخدام الأنماط الانسيابية css.

ثانيا أضف فئة التي تقوم بعمل إطار ذات حواف دائرية على الأطراف عن طريقة كتابة اسم الفئة في النمط الخاص بالصورة او الصور المراد جعل لها حواف او حافة دائري.

توجد طريقتان

اما عن طريق عمل فئة في ملف الأنماط الانسيابية الخاص بك css

img.rounded-corners {
  border-radius: 30px;
}

او عن طريق إضافة خاصية الحواف او الزوايا الدائرية لكل صورة

border-radius: 30px;

مثال عمل حواف دائرية من جميع زوايا الصورة جحم الزوايا الدائرية هو 30 px

الكود التالي يتم وضعه في خاصية img بعد تحديد المسار باستخدام خاصية src. في حال أردت استخدام خاصية الزوايا الدائرية على مستوى الصورة

Style="border-radius: 30px;"

اما اذا اردت على مستوى ملف css يمكنك استخدام

img.rounded-corners {
  border-radius: 30px;
}

مع استدعاء ملف الفئة داخل الصورة عن طريق كتابة اسم الفئة في خاصية img

Class="rounded-corners"

مثال عمل حواف او زوايا دائرية على الصورة 5 px

Style="border-radius: 5px;"

مثال عمل زوايا دائرية للصورة 150 px

Style="border-radius: 150px;"

مثال جعل الصورة على شكل بيضاوي أفقي او عمودي او حتى دائري.

قيمة 50٪ تجعل كافة زواية الصورة تكون متصلة مع بعضها البعض وتأخذ الصورة شكل بيضاوي أفقي في حال كانت الصورة على شكل مستطيل كما في الصورة في الأسفل.

اما بيضاوي عامودي في حال كانت الصورة على شكل مستطيل عامودي يمكنك أن تجربها بنفسك على صورة ذات شكل مستطيل عامودي.

اما اذا اردت صورة ذات حواف دائرية اي تكون على شكل دائرة فيحب ان تكون أبعاد الصورة متساوية اي على شكل مربع عندها سوف تكون على شكل دائرة حاول أن تجربها بنفسك. مع الخاصية والقيم الا بالأسفل.

Style="border-radius: 50%;"

الخاصية نصف القطر border-radius في الواقع لها اربع قيم فهي تحدد شكل كل زاوية للصورة في وضع قيمة واحدة كما في الأمثلة السابقة فإننا في الواقع تطبق هذه القيمة على الزوايا الاربع تلقائيا للصورة فتجعلها دائرية من كل الزوايا ماذا لو أردت قيم مختلفة او من زاوية واحدة فقط. عليك أن تفهم الخاصية فهي كما ذكرت لها ٤ قيم. القيم هي كالتالي من اليسار الي اليمين كما في المثال التالي. القيمة الأولى 10px تحدد نصف قطر الزاوية اليسرى العلوية للصورة. تليها القيمة 20px التي تحدد الزاوية اليمني العلوية. تليها القيمة 30px الزاوية اليمني السفلية ثم اخيرا القيمة 60px تحدد الزاوية اليسرى السفلية. إذا أردت زاوية دائرية من طرف واحد فعليك ان تضع القيمة مع وضع باقي القيم ب 0px لكي تعمل.

مثال على صورة ذات زوايا دائرية مختلفة نصف القطر من كل طرف.

Style="border-radius: 10px 20px 30px 60px;"

هنا مثال قمنا بجعل الزاوية الدائرية العلوية اليسرى والسفلية اليمني متساوية القيم وهي 120px بينما الطرفان الاخران متساوين في القيمة وهي 20xp

border-radius: 120px 20px 120px 20px;

تذكر دائما أن الزوايا الدائرية للصورة تختلف شكلها عند استخدام النسبة المئوية ذات قيمة 50٪ لأنها ستجعل الزاوية دائرية حتى منتصف الطرف كما شرحنا مسبقا اذا كانت الصورة مستطيل أفقي ستاخذ شكل بيضاوي أفقي. واذا كانت مستطيل عامودي ستاخذ شكل بيضاوي عامودي واذا كانت الصورة مربع ستاخذ شكل دائري. في مالنا التالي الصورة تاخذ شكل بيضاوي أفقي من ٣ زوايا لأننا جعلنا قيمة الزاوية اليسرى العلوية صفر.

Style="border-radius: 0 50% 50% 50%"

اقرأ المزيد في دليل دروس تعلم الأنماط او الأشكال الانسيابية المتتالية css