الدرس36 : إضافة زوايا مدورة border-radius ب css

الزوايا المدورة css :

الحواف التي توجد في جوانب الصور، النصوص أو  الفيديوهات ...
كان من الصعب إضافة  زوايا مدورة في الأول و كان يعاني منها كثيرا أصحاب المواقع لكن مع ظهور css3 أصبح من السهل إضافتها ، عن طريق border-radius، و هي تسمح لنا بالتعديل على زوايا عنصر ما في الصفحة بسهولة تامة عن طريق إعطائه قيمة ب px:

p{
border: 2px solid #000;
border-radius: 10px;
}

جميع الزوايا ستدور بقياس 10px لأننا وضعنا قيمة واحدة إدن فستطبق على جميع الزوايا أنا لم أضف خلفية يمكنك أنت إضافة backgroun للنص لتراه بشكل أوضح كما يمكنك تغيير نوع border كما رأينا في الدرس السابق :

كما يمكنك إعطاء قيمة معينة لكل زاوية على حدة :

p{
border-radius: 10px 5px 10px 5px;
}

القيم التي وضعناها هي كالتالي:

1- فوق يسار. 

2- فوق يمين.

3- تحت يمين.

4- تحت يسار.

كما توجد طريقة أخرى نعطيها قيمتين نفصل بينهما بالرمز( / ) الأولى تتحكم في دوران الخط الأفقي والثانية في العمودي.

p{
 border-radius: 20px /10px;
}

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

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