در این مقاله سعی بر آن داریم که بررسی اجمالی بروی یکی از ویژگی های پرطرفدار css به نام border-radius انجام دهیم.
ما نیاز داریم از جنبه های مختلف آن ها را بررسی کنیم تا شناخت کاملی نسبت به ویژگی های انها بدست آورده و در پروژه های خود بهره ببریم.
این ویژگی برای گرد کردن اطراف یک باکس در سی اس اس استفاده میشود.
بگونه ای که اگر یک عدد بعنوان مقدار برای آن بنویسید، هر چهار گوشه باکس، به اندازه همان عدد ورودی شما ،شعاع گرفته و گرد میشود.
; border-radius:5px
هر چهار طرف گرد میشود به اندازه شعاع ۵ پیکسل
فقط کافیست که ۲ عدد در روبروی این ویژگی و بعنوان value آن بنویسید.
قطر اصلی و قطر فرعی را اندازه گذاری خواهد کرد. به این ترتیب میتوانید شکل نامتقارنی را برای باکس خود به ارمغان آورید.
border-radius: 10px 60px
قطر اصلی و فرعی
اگر نیاز داشته باشید که هر گوشه باکس شما، به میزان مخصوص به خود دچار انحنا و گردی شود میتوانید از ۴ عدد پشت سر هم استفاده کنید.
border-radius:10px 50px 5px 90px
به ترتیب: بالا، راست، پایین، چپ
در css میتوانید بجای واحد px از واحد درصد یا % استفاده کنید. در این صورت خود سیستم بر حسب مقدار پیکسل باکس شما، درصد آن را حساب کرده و روی گوشه های المان اعمال میکند.
میتوانید مانند چند مثال بالا، فقط بجای px از ٪ استفاده کنید.
border-radius:50%
خروجی دایره در صورت مربع بودن المان
تا به حال برای اینه ۴ گوشه شکل ۱/۴ دایره به خود بگیرد ، از اعداد بالا استفاده میکردیم. حال فقط کافیست از ترکیب دو عدد که نشان دهنده قطر بزرگ و کوچک بیضی ها هستند استفاده کنیم.
border-radius:20px/60px
اینگونه، شعاع یکی بیضی در گوشه ها خواهد افتاد
من، پارسا قربانیان موسس مدرسه اینترنتی پرنیان و برگزارکننده اولین دوره های آموزشی تضمین استخدام در ایران هستم. هدف من ایجاد یک معادله برد، برد هست. میخواهیم آرزوهایمان را با هم بسازیم♥
