بسم الله والحمد لله .. اليوم إخواني نشرح درس رائع وخاصية جميلة جداً من خواص تقنية 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 = اليسار اسفل
وبهذا ينتهي شرحنا لهذه الخاصية الرائعة
في امان الله
التعليقات