سلام بچهها!
امروز قراره از دنیای گوشههای تیز ۹۰ درجه خداحافظی کنیم و کمی نرمی و ظرافت به کارهامون بدیم.
این کار رو با ویژگی border-radius در CSS انجام میدیم.
👀 شروع کار
توی مرورگر یه صفحه نمونه داریم.
چهار تا باکس آبی میبینید که کلاس .box-a دارن.
برای این که گوشههاشون گرد بشه، کافیه داخل همین قانون CSS که برای این کلاس نوشتیم، ویژگی border-radius رو اضافه کنیم.
مثلاً:
border-radius: 10px;
حالا اگه ذخیره و رفرش کنیم، هر چهار گوشه این باکسها گرد میشن.
📏 تنظیم مقدار گردی گوشهها
- اگه فکر میکنید گردی کم هست، میتونید مقدار رو از 10px به 25px یا هر عددی که میخواید افزایش بدید.
- لازم نیست هر چهار گوشه یک مقدار داشته باشن.
اگر دو مقدار بدیم:
border-radius: 10px 25px;
مقدار اول (۱۰px) برای بالا-چپ و پایین-راست استفاده میشه
و مقدار دوم (۲۵px) برای بالا-راست و پایین-چپ.
- حتی میتونیم چهار مقدار بدیم تا دقیق همه گوشهها رو کنترل کنیم:
border-radius: 10px 10px 25px 25px;
این ترتیب به صورت ساعتگرد هست: بالا-چپ → بالا-راست → پایین-راست → پایین-چپ.
🎨 گردی دایرهای vs بیضیشکل (Elliptical)
تا اینجا همه گردیها دایرهای بودن (یعنی افقی و عمودی برابر).
اما با استفاده از اسلش / میتونیم گردی بیضیشکل بسازیم:
border-radius: 10px / 25px;
برین داخل مرورگر
- مقدار قبل از / → شعاع افقی
- مقدار بعد از / → شعاع عمودی
مثلاً اگه بگیم:
border-radius: 40px / 15px;
گردی گوشه افقیتر و کمارتفاعتر میشه.
🧪 تبدیل مربع به دایره
اسکرول که کنیم پایینتر، یه باکس خاکستری با کلاس .box-b داریم که مربع 200×200 پیکسلیه و روش نوشته «I wish I was a circle».
اگه بخوایم مربع کامل رو به دایره تبدیل کنیم، مقدار border-radius باید نصف طول ضلع باشه:
border-radius: 100px;
چون 100 نصف 200 هست.
حالا با رفرش، مربع به یک دایره کامل تبدیل میشه.
🧪 تبدیل مستطیل به بیضی
یه باکس تیرهتر پایینتر داریم با کلاس .box-c و ابعاد 350×200 پیکسل.
اینجا بیضی میخوایم، پس باید افقی و عمودی رو جدا بدیم:
- نصف عرض (350) = 175px
- نصف ارتفاع (200) = 100px
border-radius: 175px / 100px;
نتیجه: یک بیضی دقیق.
💡 ترفند ویژه: 50%
برای ساخت دایره یا بیضی، لازم نیست همیشه نصفها رو حساب کنید.
کافیه بگید:
border-radius: 50%;
و مرورگر خودش حساب میکنه.
این روش هم سریعتره و هم در طراحی واکنشگرا (Responsive) انعطاف بیشتری داره، چون حتی اگه اندازه عنصر تغییر کنه، گردی درست میمونه.
📌 جمعبندی درس
- border-radius = نرم کردن گوشهها، ساخت دایره و بیضی
- میتونیم یک، دو یا چهار مقدار بدیم
- با / گردی بیضیشکل میسازیم
- برای دایره/بیضی → بهترین گزینه 50% هست