بررسی اجمالی پراپرتی border-radius در زبان css

بررسی اجمالی پراپرتی border-radius در زبان css

در این مقاله سعی بر آن داریم که بررسی اجمالی بروی یکی از ویژگی های پرطرفدار css به نام border-radius انجام دهیم.

ما نیاز داریم از جنبه های مختلف آن ها را بررسی کنیم تا شناخت کاملی نسبت به ویژگی های انها بدست آورده و در پروژه های خود بهره ببریم.

بررسی اجمالی پراپرتی border-radius در زبان css

حالت اول : ۴ گوشه

این ویژگی برای گرد کردن اطراف یک باکس در سی اس اس استفاده میشود.

بگونه ای که اگر یک عدد بعنوان مقدار برای آن بنویسید، هر چهار گوشه باکس، به اندازه همان عدد ورودی شما ،شعاع گرفته و گرد میشود.

; border-radius:5px

هر چهار طرف گرد میشود به اندازه شعاع ۵ پیکسل

حالت دوم : ۲ گوشه

فقط کافیست که ۲ عدد در روبروی این ویژگی و بعنوان value آن بنویسید.

قطر اصلی و قطر فرعی را اندازه گذاری خواهد کرد. به این ترتیب میتوانید شکل نامتقارنی را برای باکس خود به ارمغان آورید.

border-radius: 10px 60px

قطر اصلی و فرعی

حالت سوم : ۴ مقداره

اگر نیاز داشته باشید که هر گوشه باکس شما، به میزان مخصوص به خود دچار انحنا و گردی شود میتوانید از ۴ عدد پشت سر هم استفاده کنید.

border-radius:10px 50px 5px 90px

به ترتیب: بالا، راست، پایین، چپ

حالت چهارم : درصدی یا percent

در css میتوانید بجای واحد px از واحد درصد یا % استفاده کنید. در این صورت خود سیستم بر حسب مقدار پیکسل باکس شما، درصد آن را حساب کرده و روی گوشه های المان اعمال میکند.

میتوانید مانند چند مثال بالا، فقط بجای px از ٪ استفاده کنید.

border-radius:50%

خروجی دایره در صورت مربع بودن المان

حالت پنجم : ترکیب بیضی برای ۴ گوشه

تا به حال برای اینه ۴ گوشه شکل ۱/۴ دایره به خود بگیرد ، از اعداد بالا استفاده میکردیم. حال فقط کافیست از ترکیب دو عدد که نشان دهنده قطر بزرگ و کوچک بیضی ها هستند استفاده کنیم.

border-radius:20px/60px

اینگونه، شعاع یکی بیضی در گوشه ها خواهد افتاد

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *