• 0

كيف أجعل زوايا الشكل أو الصورة بشكل دائري بواسطة css؟

في ملف التنسيق css، ماهي الخاصية التي تمكنني من جعل زوايا شكل ما على صفحتي بشكل دائري؟

curved-box.thumb.jpg.8b650bca80ae06abe71

تمّ تعديل بواسطة Simoh

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 1

هذه الخاصية هي border -radius و تقبل القيم ب px أو  em على الشكل التالي:

 border-radius: 25px;

 حيث أن قيمة هذه الخاصية الافتراضية هي 0px.

صورة توضيحية عن border-radius:

border-radius-sh_(2).thumb.png.c01d55767

هذا محرر، يُغيّر شكل الزوايا مع تغير قيمة border-radius.

المصدر

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

تذكر فقط يا أخي  عندما  تستعمل الخاصية border-raduis  مراعاة  حجم الصورة   مثلا حتى تحصل على شكل دائري تماما يجب أن تكون الصورة مربعة الشكل و التعليمة  تقبل حميع القيم المستعملة في css3   مثل em ,px,%    و أفضل إستعمال لهذه الخاصية النسبة المئوية  و هنا مثال  بسيط  يراعي متطلبات المتصفحات المستعملة مثل safari ,chrome,mozila

img {
  border-radius: 50%; /*  opera, IE9, */
 -webkit-border-radius: 50%;  /* safari , chrome */
  -moz-border-radius: 50%;  /* mozila */
}

 

 

 

border-raduis-by-samy-ouaret.thumb.PNG.2

 

و كما قلت تحصل على الشكل الدائري تماما  إذا كانت الصورة مربعة كما قلت بالسابق  و إذا لم تكن يمكنك إضافة الخاصيتين   width ,height

img {
    width: 400px;  /*  العرض مساوي للطول */
    height: 400px;/*  العرض مساوي للطول */
}

 

يمكنك البحث أكثر عن هذه الخاصية  border-raduis.

 

تمّ تعديل بواسطة samy ouaret

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن