سنبدء الدرس بعمل جزء مربع الشكل بعرض 507 بيكسل وبارتفاع 100 بيكسل وبخلفية زرقاء داكنه لنطبق على هذا الجزء الحدود المنحنية وستكون اكواد هذا الجزء بالشكل التالي :
كود html
<div id="box"> ----"box" قمنا ببتعريف هذا الجزء بالاسم
</div>
كود css
#box {
width:507px; هنا قمت بضبط العرض
height:100px; وهنا الارتفاع
background-color:#4a6da1; وهنا لون الخلفيه
}
وسينتج لنا الشكل التالي :
ونلاحظ ان الحدود غير منحنية وهنا يبدء درسنا فمن اجل جعل الحدود منحنية يتوجب علينا استخدام الوسم التالي :
border-radius:25px;
حيث نستبدل الرقم 25 بالرقم المناسب
وهذا الرقم يمثل قيمة الانحناء ..... لنجرب الوسم السابق على الجزء الذي
قمنا بانشاءه في الاعلى حيث سنضيفه الى تنسيق css بالشكل التالي :
#box {
width:507px; هنا قمت بضبط العرض
height:100px; وهنا الارتفاع
background-color:#4a6da1; وهنا لون الخلفيه
border-radius:25px; هذا هو الجزء الذي اضفناه لعمل انحناء للزوايا
}
بعد اضافة الوسم سيكون الناتج كالتالي :
هل لاحظت انحناء الزوايا .....
اتمنى ان يكون الدرس مفيداً ونلتقي في الدرس المقبل ان شاء الله الذي
سنتحدث فيه عن الزوايا والحدود المنحنيه بشكل اوسع .
ليست هناك تعليقات:
إرسال تعليق