آموزش CSS – آشنایی با Property یی تحت عنوان border-radius در سی اس اس (CSS) (جلسه ۲۳)

border-radius این امکان را به طراحان سایت می دهد تا بتوانند گوشه های عناصر قرار گرفته روی صفحه را از حالت زاویه دار خارج کرده به طوری که بسته به مقداری که برای آن در نظر گرفته می شود، حالت بدون زاویه ای به خود خواهند گرفت.
برای روشن شدن این مسئله کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر متن خود می کنیم:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>asrefonon</title>
   <link type="text/css" rel="stylesheet" href="css/main.css">
</head>
<body>
   <p>This is border-radius</p>
</body>
</html>

همانطور که می بینیم داخل تگ <body> یک تگ <p> حاوی عبارت This is border-radius وارد کرده ایم. حال اقدام به تکمیل کدهای سی اس اس (CSS) می کنیم:

p {
   width: 200px;
   padding: 30px;
   background-color: red;
   border-radius: 17px;
}

همانطور که در کد فوق مشاهده می شود برای تگ <p> یک Property تحت عنوان border-radius علاوه بر دیگر Property ها که پیش از این با آن ها آشنا شدیم قرار داده ایم و مقداری هم که برای آن در نظر گرفته ایم معادل با ۱۷ پیکسل است.
حال پس از ذخیره کردن هر دو فایل سی اس اس و اچ تی ام ال، فایل اچ تی ام ال را داخل مرورگر دلخواه خود باز می نماییم تا نتیجه را مشاهده کنیم:

css_border-radius_1

همانطور که در تصویر فوق می بینیم هر چهار گوشه مستطیل مربوط به تگ <p> به اندازه ۱۷ پیکسل منحنی شده اند. این ویژگی سی اس اس قابلیت های بسیاری را در اختیار طراح قرار می دهد که در ادامه با آن ها بیشتر آشنا خواهیم شد.
کد فوق را به صورت زیر ویرایش می کنیم:

p {
   width: 200px;
   padding: 30px;
   background-color: red;
   border-radius: 17px 40px;
}

همانطور که در کد فوق می بینیم برای border-radius دو مقدار در نظر گرفته ایم. مقدار اول که برابر با ۱۷ پیکسل است که برای گوشه بالا سمت چپ و گوشه پایین سمت راست در نظر گرفته خواهد شد و مقدار دوم هم که برابر با ۴۰ پیکسل است برای گوشه بالا سمت راست و گوشه پایین سمت چپ در نظر گرفته خواهد شد:

css_border-radius_2

می بینیم که به سادگی توانستیم افکتی ساده اما در عین حال زیبا با این کدهای ابتدایی سی اس اس (CSS) ایجاد کنیم.
حال اگر برای این Property به صورت زیر سه مقدار در نظر بگیریم، مقدار اول که معادل با ۱۷ پیکسل است برای گوشه بالا سمت چپ است، مقدار دوم که معادل با ۴۰ پیکسل است به گوشه بالا سمت راست و گوشه پایین سمت چپ اختصاص خواهد یافت و در نهایت مقدار سوم که معادل با ۵ پیکسل است برای گوشه پایین سمت راست در نظر گرفته خواهد شد:

p {
   width: 200px;
   padding: 30px;
   background-color: red;
   border-radius: 17px 40px 5px;
}

حال مرورگر خود را به روز رسانی می کنیم:

css_border-radius_3

می بینیم که گوشه پایین سمت راست به مقدار ۵ پیکسل تغییر پیدا می کند. حال برای این Property چهار مقدار به صورت زیر در نظر می گیریم:

p {
   width: 200px;
   padding: 30px;
   background-color: red;
   border-radius: 17px 40px 5px 0;
}

مقدار ۱۷ پیکسل برای گوشه بالا سمت چپ، مقدار ۴۰ پیکسل برای گوشه بالا سمت راست، مقدار ۵ پیکسل برای گوشه پایین سمت راست و در نهایت مقدار صفر هم برای گوشه پایین سمت چپ اختصاص خواهد یافت (لازم به ذکر است که در سی اس اس زمانیکه بخواهیم مقدار صفر را برای چیزی در نظر بگیریم نیازی به گذاشتن px بعد از آن نیست اما اگر هم این مقدار را به صورت 0px بنویسیم مشکلی ایجاد نخواهد شد).
مجدد مرورگر را به روز رسانی خواهیم کرد:

css_border-radius_4

می بینیم به همان ترتیبی که توضیح دادیم، هر چهار Value اختصاص پیدا کرده اند.
علاوه بر این، مقادیر border-radius را به صورت مجزا هم می توان اختصاص داد. برای این منظور کد فوق را به صورت زیر ویرایش می کنیم:

p {
   width: 200px;
   padding: 30px;
   background-color: red;
   border-top-left-radius: 17px;
   border-top-right-radius: 40px;
   border-bottom-right-radius: 5px;
   border-bottom-left-radius: 0;
}

در واقع کدهای فوق دقیقاً نتیجه ای یکسان ایجاد خواهند کرد.
به طور کلی هر گوشه از مستطیل از دو عدد تشکیل شده است که یکی عمودی است و دیگی افقی که این دو مقدار در کنار یکدیگر منحنی را تشکیل می دهند. لازم به ذکر است که در سی اس اس (CSS) به این دو مقدار هم دسترسی داشته و می توانیم آن ها را شخصی سازی کنیم. برای این منظور کدهای زیر را در نظر می گیریم:

p {
   width: 200px;
   padding: 30px;
   background-color: red;
   border-radius: 200px/50px;
}

همانطور که در کد فوق می بینیم برای border-radius دو مقدار در نظر گرفته ایم که مقدار اول برای محور افقی بوده و مقدار دوم برای محور عمودی. حال مجدد پس از ذخیره کردن فایل سی اس اس، مرورگر را به روز رسانی می کنیم:

css_border-radius_5

می بینیم که با این روش می توان تگ های اچ تی ام ال را به اشکال متنوعی تغییر داد. برای روشن شدن این مسئله تصویر زیر را مد نظر قرار می دهیم:

css_border-radius_6

همانطور که در تصویر فوق مشخص است، در تصویر A ابتدا عدد ۸۰ پیکسل در نظر گرفته شده است سپس عدد ۴۰ پیکسل. در واقع عدد ۸۰ نشانگر شعاع حول محور افقی است و عدد ۴۰ نشانگر شعاع حول محور عمودی. حال در تصویر B می بینیم که با تغییر شعاع محور عمودی تغییر قابل توجهی ایجاد شده است.
وب سایتی به آدرس css3generator.com این امکان را به طراحان سایت می دهد تا به راحتی بتوانند کدهای سی اس اس را ایجاد نموده، کد را کپی نمایند و در فایل سی اس اس خود قراد دهند:

css3generator

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)