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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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