سازندهٔ گِردی گوشه CSS
چهار اسلایدر گوشه بههمراه حالت بیضویِ هشتمقداری، پیشنمایش زنده و کدِ CSS آمادهٔ کپی.
دربارهی سازندهٔ گِردی گوشه CSS
در CSS مقدارهای درصدی border-radius نسبت به هر محور جداگانه محاسبه میشوند؛ یعنی ۵۰٪ روی یک مستطیل بهجای دایره یک بیضی میسازد. با نویسهٔ اسلش (/) هم میتوانید شعاع افقی و عمودی هر گوشه را جدا تعیین کنید و همین راز ساختن شکلهای ارگانیک و حبابی است. این ابزار هر چهار گوشه و حالت هشتمقداری بیضوی را با پیشنمایش زنده در اختیارتان میگذارد و کد آمادهٔ کپی را همان لحظه میسازد.
راهنمای استفاده از سازندهٔ گِردی گوشه CSS
- 1
حالت ساده یا بیضوی را انتخاب کنید و واحد px یا درصد را تعیین کنید.
- 2
اسلایدرِ هر گوشه را بکشید و تغییر شکل جعبه را زنده ببینید.
- 3
برای شروع سریع یکی از شکلهای آماده مثل قرصی، مربعگِرد یا حبابی را بزنید.
- 4
با گزینهٔ قفل گوشهها هر چهار گوشه را همزمان و یکسان تنظیم کنید.
- 5
کد border-radius تولیدشده را با دکمهٔ کپی بردارید و در پروژه بگذارید.
پرسشهای متداول
چرا border-radius: 50% روی دکمهٔ مستطیلی دایره نمیسازد؟
چون درصدها نسبت به عرض و ارتفاع بهطور جداگانه اعمال میشوند و روی عنصر غیرمربع نتیجه بیضی است. برای گوشهٔ کاملاً گرد (شکل قرصی) از مقدار px بزرگتر از نصف کوچکترین ضلع استفاده کنید یا شکل آمادهٔ «قرصی» را بزنید.
اسلش (/) در مقدار border-radius چهکار میکند؟
مقدارهای پیش از اسلش شعاع افقیِ گوشهها و مقدارهای پس از آن شعاع عمودی آنها هستند. همین جداسازی است که ساخت گوشههای حبابی و ارگانیک را ممکن میکند.
آیا این شکلهای حبابی همان squircle واقعی اپل هستند؟
خیر. squircle واقعی یک اَبَربیضی (superellipse) است و با border-radius دقیق ساخته نمیشود؛ خروجی این ابزار تقریبی نزدیک و کاملاً سازگار با مرورگرهاست، بدون نیاز به SVG یا clip-path.
ترتیب چهار مقدار border-radius چگونه است؟
بهترتیب بالا-چپ، بالا-راست، پایین-راست، پایین-چپ و ساعتگرد از گوشهٔ بالا-چپ. هرگاه بعضی مقدارها برابر باشند، ابزار بهصورت خودکار کد را کوتاه میکند.