نکات کلیدی
- 01سه حالت — یکسان، مختص هر گوشه و بیضیشکل — همه چیز را از دکمههای گرد ساده تا اشکال blob آلی پوشش میدهند.
- 02واحدهای px، % و rem را پشتیبانی میکند، هر کدام با رفتار مقیاسبندی متفاوت.
- 03حالت بیضیشکل شعاعهای افقی و عمودی را برای هر گوشه نمایش میدهد تا syntax کامل border-radius CSS را پوشش دهد.
- 04پیشنمایش زنده از ویژگی CSS واقعی استفاده میکند، بنابراین آنچه میبینید دقیقاً آنچه مرورگر شما رندر میکند است.
از گوشههای گرد ساده تا اشکال Blob آلی
نوشتن یک مقدار border-radius چهار گوشهای از حافظه آسان است — border-radius: 8px. اما وقتی به شعاعهای متفاوت برای هر گوشه یا syntax بیضیشکل CSS نیاز دارید، میانمدت به سرعت رمزی میشود. فرم کامل top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y است — هشت مقدار در ترتیب خاص.
تولیدکننده border-radius Handytool به شما این امکان را میدهد که اسلایدرها را برای هر گوشه در هر حالتی بکشید و شکل را به صورت زنده ببینید. بدون محاسبهمجدد بین px، % و rem تبدیل کنید و وقتی کار تمام شد، declaration CSS درست را کپی کنید.
نحوه طراحی Border Radius
- 01
یک حالت انتخاب کنید
حالت یکسان یک شعاع را برای هر چهار گوشه اعمال میکند. حالت مختص هر گوشه هر گوشه را به صورت مستقل کنترل میکند. حالت بیضیشکل یک شعاع افقی و عمودی جداگانه برای هر گوشه اضافه میکند.
- 02
واحد را انتخاب کنید
px را برای اندازههای مطلق، % را برای مقادیری که با ابعاد عنصر مقیاسبندی میشوند یا rem را برای اندازههای مرتبط با اندازه قلم ریشه انتخاب کنید.
- 03
اسلایدرها را بکشید
مقادیر شعاع را تنظیم کنید و عنصر پیشنمایش را به صورت زنده ببینید که تحدیث میشود. برای حالت مختص هر گوشه، اسلایدر هر گوشه را به صورت مستقل بکشید.
- 04
شکل را پیشنمایش کنید
جعبه پیشنمایش ویژگی CSS border-radius واقعی را اعمال میکند، بنابراین شکلی که میبینید شکلی است که مرورگر شما رندر میکند.
- 05
CSS را کپی کنید
بر روی کپی کلیک کنید تا declaration border-radius را دریافت کنید و آن را در stylesheet خود جا دهید.
اشکال معمول و زمان استفاده از هر حالت
- 01دکمه قرص: حالت یکسان %، تنظیم شده به 50% — همیشه یک قرص کامل صرفنظر از عرض دکمه
- 02کارت با گردکاری ظریف: حالت یکسان px، 8–16px — الگوی UI رایجترین
- 03برچسب یا برچسب نامتقارن: حالت مختص هر گوشه، تیز در یک سمت، گرد در سمت دیگر
- 04دایره آواتار: حالت یکسان %، 50% — مقیاس با کانتینر تصویر
- 05شکل blob آلی: حالت بیضیشکل با مقادیر X/Y مختلف برای هر گوشه
پیشنمایش فوری، هیچ چیز آپلود نشده
تولیدکننده border-radius کاملاً سمت کلاینت است. اسلایدرها، تغییرات حالت و تغییرات واحد همه پیشنمایش را بیدرنگ بدون حلقه سرور تحدیث میکنند. هیچ حساب کاربری نیست و هیچ حد سرعت نیست.
ابزار در همه مرورگرهای مدرن کار میکند. ویژگی border-radius — از جمله syntax بیضیشکل X/Y — در هر نسخه evergreen Safari، Firefox، Edge و Chrome پشتیبانی میشود، بنابراین خروجی بدون پیشوندهای فروشنده یا بازگشتهای fallback امن است.
سؤالات متداول تولیدکننده Border-Radius
تفاوت بین px و % برای border-radius چیست؟
شعاع پیکسل مطلق هستند — 16px همیشه 16px است. شعاعهای درصد نسبت به ابعاد عنصر هستند، بنابراین 50% یک دایره کامل را بر روی جعبه مربع و بیضی را بر روی مستطیل ایجاد میکند.
چه زمانی باید از حالت بیضیشکل استفاده کنم؟
از حالت بیضیشکل زمانی استفاده کنید که میخواهید گوشهای که در یک محور بیشتر برآمده است — برای قرص افقی، شکل برگ یا blob آلی. CSS این را به عنوان X-radii / Y-radii در میانمدت border-radius بیان میکند.
چرا شعاع درصدم بر روی جعبه غیر مربع اشتباه به نظر میرسد؟
درصد افقی نسبت به عرض عنصر است؛ درصد عمودی به ارتفاع آن. در عنصری وسیع و کوتاه، گوشهها به جای کمانهای دایرهای به بیضیهای کشیده میشوند.
آیا خروجی در هر مرورگر کار میکند؟
بله — border-radius از جمله syntax بیضیشکل در هر مرورگر مدرن پشتیبانی میشود: همه نسخههای evergreen Safari، Firefox، Edge و Chrome. هیچ پیشوند فروشنده لازم نیست.
نحوه ایجاد دایره کامل با border-radius؟
تمام گوشهها را به 50% در حالت درصدی بر روی عنصر مربع تنظیم کنید. عنصر نیز به عرض و ارتفاع برابر نیاز دارد — اگر اندازه پویا است از aspect-ratio: 1 / 1 استفاده کنید.