نحوه کارکرد ویژگی CSS border-radius
ویژگی border-radius در CSS به طراحان و توسعهدهندگان وب اجازه میدهد تا میزان گردی گوشههای یک باکس را تنظیم کنند. این ابزار امکان کنترل مجزای هر گوشه یا متصل کردن آنها به یکدیگر را فراهم میکند. شما میتوانید از بین واحدهای پیکسل (px) یا درصد (%) انتخاب کنید. علاوه بر این، با فعالسازی حالت بیضوی، امکان ایجاد اشکال نرمتر و ارگانیکتر از طریق تعیین شعاع افقی و عمودی مجزا برای هر گوشه وجود دارد. این ابزار به صورت آنی کد CSS متناظر با تنظیمات شما را تولید میکند.
در حالت اولیه، مقدار اسلایدر روی ۲۴ تنظیم شده است که کد خروجی آن به صورت ;border-radius: 24px خواهد بود.
تفاوت واحدهای پیکسل و درصد در طراحی گوشهها
انتخاب واحد مناسب تأثیر مستقیمی بر رفتار عنصر در طراحی واکنشگرا دارد:
- واحد پیکسل (px): در این حالت، گوشه به یک میزان ثابت و مشخص گرد میشود. این مقدار بدون توجه به ابعاد باکس همواره ثابت باقی میماند.
- واحد درصد (%): در این حالت، میزان گرد شدن گوشه نسبت به ابعاد خود باکس محاسبه میشود. درصد افقی از عرض باکس و درصد عمودی از ارتفاع باکس پیروی میکند. به عنوان مثال، اگر تمام گوشههای یک عنصر مربعشکل را روی ۵۰٪ تنظیم کنید، آن مربع به یک دایره کامل تبدیل میشود.
ایجاد اشکال پیشرفته با حالت بیضوی (Elliptical)
زمانی که حالت بیضوی غیرفعال است، هر گوشه به شکل یک ربع دایره با یک شعاع واحد رسم میشود. اما با فعال کردن حالت بیضوی، هر گوشه دارای دو شعاع مجزای افقی و عمودی میشود.
این قابلیت به شما اجازه میدهد تا فرمهای ارگانیک و نامتقارنی مانند شکل «قطره» (blob) ایجاد کنید. در این حالت، ابزار فرمت دومقداریِ مایل (slash) را در CSS مینویسد. به محض اینکه گوشهها دوباره به حالت دایرهای و متقارن بازگردند، کد تولیدشده به فرمت کوتاه و سادهتر خود بازمیگردد.
راهنمای ساخت دایره کامل و دکمههای کپسولی
برای رسیدن به اشکال هندسی استاندارد در رابط کاربری، میتوانید از فرمولهای زیر استفاده کنید:
- دایره کامل: ابتدا مطمئن شوید که عنصر شما یک مربع با اضلاع برابر است. سپس گزینه «اتصال همه گوشهها» را فعال کرده، واحد را روی درصد (%) قرار دهید و مقدار اسلایدر را روی ۵۰ تنظیم کنید.
- دکمه کپسولی (Pill-shaped): واحد را روی پیکسل (px) نگه دارید. اسلایدر را به اندازهای بکشید که مقدار آن از نصف ارتفاع دکمه بیشتر شود. در این حالت، لبههای دکمه در هر عرضی که باشد، به صورت کاملاً گرد و کپسولی باقی میماند.
راهنمای بخشهای مختلف رابط کاربری ابزار
این ابزار از بخشهای زیر تشکیل شده است که به شما در طراحی و دریافت کد کمک میکنند:
- اسلایدرها: برای تنظیم میزان گردی گوشهها استفاده میشوند. دامنه تغییرات این اسلایدرها بین ۰ تا ۱۰۰ است. چهار اسلایدر مربوط به گوشهها به صورت ساعتگرد از گوشه بالا-چپ شروع شده و به ترتیب به بالا-راست، پایین-راست و پایین-چپ اعمال میشوند.
- انتخابگر واحد: به شما امکان میدهد بین دو واحد "px" و "%" جابهجا شوید.
- دکمههای پیشفرض: این دکمهها شامل گزینههای زیر برای اعمال تنظیمات سریع هستند:
- تیز: گوشهها را کاملاً تیز میکند.
- گردشده (گردشده): یک گردی استاندارد به گوشهها میدهد.
- دایره: تمام گوشهها را روی ۵۰٪ تنظیم میکند تا شکل دایره ایجاد شود.
- قطره (Blob): شکل ارگانیک و نامتقارن ایجاد میکند.
- برگ (برگ): گوشههای متقابل را به شکل برگ تنظیم میکند.
- بخش پیشنمایش: تغییرات اعمالشده روی باکس را به صورت زنده نشان میدهد.
- بخش CSS و دکمه کپی: کد CSS نهایی در زیر عنوان "CSS" نمایش داده میشود و با کلیک روی دکمه "کپی CSS" میتوانید آن را ذخیره کنید.
حریم خصوصی و پردازش دادهها
تمام فرآیند محاسبات و ترسیم گوشهها مستقیماً در مرورگر شما انجام میشود. هیچیک از تنظیمات، مقادیر یا دادههای ورودی شما در سرورهای BroBroGo آپلود نخواهند شد و پردازش کاملاً سمت کاربر اتفاق میافتد.
پرسشهای متداول
چهار گوشه و تفاوت px با % چگونه کار میکنند؟
چهار اسلایدر در جهت عقربههای ساعت به ترتیب برای گوشههای بالا-چپ، بالا-راست، پایین-راست و پایین-چپ تنظیم شدهاند. در واحد پیکسل، گوشه به یک میزان ثابت گرد میشود؛ در واحد درصد، گرد شدن نسبت به ابعاد باکس انجام میشود — درصد افقی از عرض و درصد عمودی از ارتفاع پیروی میکند، بنابراین ۵۰٪ یک مربع را به دایره تبدیل میکند.
حالت بیضوی (elliptical) چه کاری انجام میدهد؟
در حالت غیرفعال، هر گوشه یک ربع دایره با یک شعاع واحد است. با فعال کردن آن، هر گوشه یک شعاع افقی و عمودی مجزا دریافت میکند که به شما امکان میدهد اشکال نرم و ارگانیک شبیه به «قطره» (blob) بسازید. این ابزار فرمت دومقداریِ مایل (slash) را برای شما مینویسد و در صورت گرد شدن مجدد گوشهها، به فرمت کوتاه بازمیگردد.
چگونه یک دایره کامل یا دکمه کپسولی بسازم؟
گوشهها را به هم متصل کنید، واحد را به درصد تغییر دهید و روی ۵۰٪ بگذارید: یک مربع به دایره تبدیل میشود. برای دکمههای کپسولیشکل، واحد را روی پیکسل نگه دارید و یکی از گوشهها را به اندازهای بکشید که از نصف ارتفاع دکمه بیشتر شود — در این حالت، لبهها در هر عرضی کاملاً گرد باقی میمانند. پیشفرض دایره این حالت را با یک کلیک برای شما آماده میکند.