دروس دورة CSS : شرح الخاصية border-radius في CSS3

بسم الله والحمد لله .. اليوم إخواني نشرح درس رائع وخاصية جميلة جداً من خواص تقنية CSS3 وهي الخاصية .. border-radius تلك الخاصية التي تجعل من...

ميني سوفت

بسم الله والحمد لله ..

اليوم إخواني نشرح درس رائع وخاصية جميلة جداً من خواص تقنية CSS3 وهي الخاصية ..
border-radius
تلك الخاصية التي تجعل من اي صندوق حدود مستديرة جميلة ويمكنك التحكم في جميع الأطراف وحجم الدوران..
سوف نقوم بالتجربة مباشرتاً دون كثرة كلام ..
افتح صفحة تكست فارغة واعطها الامتداد html ثم ضع بها هذا الكود ..

<!DOCTYPE html>
<html>
<head>
<style>
div{
border:2px solid #111;
padding:10px;
background:#0cf;
color:#fff;
width:160px;
border-radius:15px;
}
</style>
</head>
<body>
<div>
Mini Soft by Ahmad Saleh<BR />
Mini Soft by Ahmad Saleh<BR />
Mini Soft by Ahmad Saleh<BR />
</div>
</body>
</html> 
ثم اغلق الصفحة بعد حفظها ثم افتحها على المتصفح لترى التالي ..


border-radius:15px
انظر لتلك الحواف المستديرة ,, ما جعلها هكذا هو الكود اسفل الصورة ,, اما عن الحدود السوداء فهي ترجع للسطر الأزرق في الكود السابق ..
يمكنك أن تتحكم في درجة الإستدارة بتقليل حجم الـ px او زيادتها .
يمكنك ايضاً ان تجعل حواف أكبر من الأخرى أو تعمل على استدارة حافة وحافة أخرى لا , يمكنك هعمل ذلك من خلال هذا الكود ..

border-radius: 0 15px 0 15px;
وعند تطبيق تلك الكود ستجد الصورة كالتالي ..

border-radius: 0 15px 0 15px
 بدون تفكير , كل رقم من هؤلاء مسئول عن حافة من الاربع حواف , فكما ترون هم اربعة ارقام ويمكننا تفسيرهم
الرقم الآول 0 = اليسار أعلى
الرقم الثاني 15px = اليمين أعلى
الرقم الثالث 0 = اليمين اسفل
الرقم الرابع 15px = اليسار اسفل

وبهذا ينتهي شرحنا لهذه الخاصية الرائعة
في امان الله


التعليقات

BLOGGER: 1
تحميل...
325x285
مساحة إعلانية
728x90
728x90
الرجاء مساعدتي على نشر الموضوع من خلال المشاركة على مواقع التواصل الإجتماعي بواسطة الأزرار اسفل التدوينة وجزاكم الله خيراً
الاسم

اخبار تقنية,27,أدوات بلوجر,10,اضافات بلوجر,13,أكواد,9,البلوجر,26,التنصيب الصامت,3,أندرويد,7,اندرويد,7,برامج الإنترنت,51,برامج البرمجة,17,برامج التنظيف,15,برامج التنظيف والتحسين,11,برامج الحماية,18,برامج الصوت والفيديو,12,برامج الصور,1,برامج الكمبيوتر,26,برامج الميديا,23,برامج متنوعة,27,برامج مجانية,101,برامج مدفوعة,18,تطبيقات اندرويد,14,تمارين ومكملات,16,حماية,2,رياضة كمال الاجسام,19,شرح الويندوز,31,شروحات البرامج,84,شروحات بلوجر,77,شروحات عامة,49,شروحات مواقع,52,شروحات وتعريب,11,شعر,1,صحة وجمال,23,قوالب بلوجر,6,قوالب معربة,2,موبايلات,17,ميكروسوفت اوفيس,2,blogger,81,blogger widgets,1,Cars,3,City,3,CSS,51,CSS3,47,Entertainment,3,Facebook,35,Fashion,7,featured,5,Foods,7,Gallery,6,Graphic Design,8,HTML,19,HTML 5,14,Motion Design,8,Movies,2,Music,12,Nature,6,People,11,Phone,4,php,1,Print Design,2,SEO,20,Server,2,Short,1,Sports,7,Technology,13,Test,1,Title,2,Travel,5,Update,2,Video,7,Web Design,9,Windows,51,Windows 10,1,Windows 7,19,
rtl
item
ميني سوفت: دروس دورة CSS : شرح الخاصية border-radius في CSS3
دروس دورة CSS : شرح الخاصية border-radius في CSS3
http://1.bp.blogspot.com/-b_0eTB-B4aI/UqyYDUMnebI/AAAAAAAAEf4/1yl027ZnqC8/s1600/minisoft.png
http://1.bp.blogspot.com/-b_0eTB-B4aI/UqyYDUMnebI/AAAAAAAAEf4/1yl027ZnqC8/s72-c/minisoft.png
ميني سوفت
https://www.minisoftwre.com/2013/12/css-border-radius-css3_14.html
https://www.minisoftwre.com/
https://www.minisoftwre.com/
https://www.minisoftwre.com/2013/12/css-border-radius-css3_14.html
true
3808147084449263890
UTF-8
تحميل جميع الموضوعات لم يتم العثور على اي موضوعات عرض الكل إقرأ المزيد رد إلغاء الرد حذف بقلم الرئيسية الصفحات موضوع عرض الكل زوارنا اعجبهم ايضاً القسم الأرشيف بحث جميع الموضوعات لم يتم العثور على اي موضوع متطابق مع طلبك عودة للرئيسية الأحد الإثنين الثلاثاء الأربعاء الخميس الجمعة السبت Sun Mon Tue Wed Thu Fri Sat يناير فبراير مارس ابريل مايو يونيو يوليو اغسطس سبتمبر اكتوبر نوفمبر ديسمبر Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec الآن قبل دقيقة قبل $$1$$ دقيقة قبل ساعة قبل $$1$$ ساعة بالأمس قبل $$1$$ يوم قبل $$1$$ يوم قبل اكثر من 5 اسابيع متابعون متابعة هذا المحتوى مميز من فضلك شارك لإظهار المحتوى نسخ الكود تحديد تم نسخ الكود إلى الحافظة لم يتم النسخ، إضغط CRTL+C للنسخ او CMD+C إذا كنت تستخدم نظام الماك