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