🌈 ویژگی border-radius برای گرد کردن گوشه ها در عناصر CSS

Summarize this content to 400 words in Persian Lang
سلام مردم زیبا!👋

تقریباً تمام دکمه‌ها، مدال‌ها، کارت‌ها، نمادها و آرم‌هایی که روی رابط‌ها می‌بینید گوشه‌های گرد دارند.

شما می توانید انحنا را در هر یک از چهار گوشه یک عنصر با ویژگی تنظیم کنید border-radius تعیین شعاع دایره

هر چه این شعاع بزرگتر باشد، اثر گرد شدن بیشتر خواهد بود. گرد کردن می تواند یک دایره یا یکی بیضی.

بیایید عمیق تر در ملک کاوش کنیم border-radius.

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

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

ℹ️ اگر مقدار پایین سمت راست (پایین-راست) حذف شود، همان مقدار سمت چپ بالا (بالا-چپ) است و اگر پایین سمت چپ (پایین-چپ) حذف شود، همان مقدار سمت راست بالا (بالا-راست) است. ) یعنی گوشه مقابل در هر دو مورد.

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

ℹ️ از آنجایی که هیچ مقدار چهارمی اختصاص داده نشده است، کاری که انجام می شود این است که یکی را در گوشه مربوطه بگیرید. وقتی به گوشه پایین سمت چپ رسید، مقدار گوشه مقابل آن، یعنی گوشه بالا سمت راست، گرفته می شود.

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

خواص گرد کردن فردی

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

همچنین می‌توانیم از دو مقدار در هر ویژگی جداگانه برای ایجاد یک بیضی استفاده کنیم. به عنوان مثال:

در یک لحظه به این موضوع خواهیم پرداخت…

ارزش ها

ویژگی border-radius می تواند هر واحد طول CSS معتبری را بپذیرد. می توانید مقدار آن را مشخص کنید border-radius در درصد این برای ایجاد یک شکل دایره یا بیضی مفید است:

.element {
border-radius: 50%;
width: 200px;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

همچنین می توانید درصدها را با مقادیر طول ثابت مخلوط کنید.

تفاوت بین استفاده از درصد و پیکسل چیست؟

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

در اینجا مثالی وجود دارد که تفاوت بین آنها را نشان می دهد border-radius: 50px y border-radius: 50% روی یک مستطیل اعمال می شود.

ملک چگونه کار می کند border-radius?

اگر عنصری از 300px قد بلند و 300px گسترده و الف border-top-left-radius: 100px، عنصر از گوشه بالا سمت چپ شروع به خمیدگی می کند همانطور که از آن گوشه شروع می شود و به جلو حرکت می کند تا به آن برسد 100px از عرض عنصر

سپس در سمت عمودی که ارتفاع است همین کار را می کند، یعنی از همان گوشه بالا سمت چپ شروع می شود و پایین می رود. 100pxبنابراین، این ناحیه گرد بین دو طرف ایجاد می شود.

اگر کادری مانند آنچه در تصویر می بینیم بکشیم که فقط گوشه سمت چپ بالای آن خمیده باشد، آن کادر دارای 100px گسترده و 100px بالا، یعنی ارزشی که به آن دادیم border-top-left-radius

همپوشانی شعاع لبه

جی سیتر توضیح داد که وقتی مقدار شعاع یک گوشه آنقدر زیاد باشد که با شعاع گوشه دیگر همپوشانی داشته باشد چه اتفاقی می افتد. مانند این مثال:

ما یک شعاع 40 پیکسلی را به گوشه سمت چپ بالا و پایین سمت چپ اعمال می کنیم، پس چرا آنها مربع هستند؟ چون ارزش 999em از دو گوشه دیگر آنها را می پوشاند. جی به ریاضیات پشت این موضوع و نحوه جلوگیری از وقوع آن می پردازد، بنابراین خواندن مقاله او برای محتوای بیشتر ارزش دارد.

شعاع مرزی بیضوی

ملک border-radius همچنین می توان از آن برای ایجاد حاشیه های بیضوی استفاده کرد. شعاع بیضوی با تعیین دو مقدار برای هر محور در همان گوشه تنظیم می شود که با فاصله از هم جدا می شوند.

مقدار اول شعاع جهت افقی است، مقدار دوم در جهت عمودی است.

هنگام استفاده از شعاع های بیضوی با مقادیر بسیار بزرگ، منحنی یک گوشه می تواند بر روی منحنی گوشه های مجاور، به ویژه آنهایی که مقادیر شعاع کمتری دارند، تأثیر بگذارد.

در این مثال، ما فقط مقدار منحنی را در گوشه سمت راست بالا تغییر می دهیم. با این حال، توجه داشته باشید که تمام گوشه های گرد عنصر به یکدیگر وابسته هستند، حتی آنهایی که مقادیر آنها را به صراحت تغییر نمی دهیم.

هشت مقدار که با یک اسلش از هم جدا شده اند

حال می خواهیم از کوتاه نویسی استفاده کنیم border-radius برای تنظیم تمام شعاع ها روی مقادیر مختلف برای به دست آوردن گوشه های ناهموار

برای رسیدن به این هدف، فقط باید یک اسلش (/) اضافه کنید، مقادیر سمت چپ اسلش نشان دهنده شعاع افقی برای هر گوشه است، در حالی که مقادیر سمت راست نشان دهنده شعاع عمودی هستند.

همانطور که می بینید، ما دو بار عنصر خود را در جهت عقربه های ساعت دور می زنیم.

پره های تو در تو

اگر عنصری با لبه‌های گرد دارید و داخل عنصر دیگری است که دارای لبه‌های گرد و مقداری بالشتک است، متوجه شده‌اید که اگرچه هر دو دارای یکسان هستند. border-radius، عنصر تو در تو به خوبی با عنصر بیرونی هماهنگ نمی شود.

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

بنابراین برای محاسبه شعاع ایده آل یک عنصر تو در تو، باید از یک فرمول ساده استفاده کنید: outerRadius = innerRadius + spaceBetween (padding)

outerRadius: شعاع مرز عنصر والد.
innerRadius: شعاع مرز عنصر فرزند.
spaceBetween: فضا padding بین عنصر والد و فرزند

این فرمول تضمین می کند که عنصر تو در تو به طور کامل در عنصر اصلی قرار می گیرد و در نتیجه ظاهر هماهنگ تری ایجاد می کند.

در اینجا استفاده از ویژگی های سفارشی می تواند بسیار مفید باشد:

.parent {–padding: 8px;–radius: 20px;padding: var(–padding);border-radius: calc(var(–radius) + var(–padding));}.nested { border-radius: var(–radius); }

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ژنراتورها

مراجع

ممنون که خواندید🦸🏻‍♀️شبکه های اجتماعی من که در آن یادداشت های کد را به اشتراک می گذارم:

▶️یوتیوب📷اینستاگرام🝕 (تویتر)🎵تیک توک🔵فیسبوک🐙گیت هاب🔲کد کردن✍️متوسط

.element {
  border-radius: 50%;
  width: 200px;
}

.parent {
--padding: 8px;
--radius: 20px;
padding: var(--padding);
border-radius: calc(var(--radius) + var(--padding));
}
.nested { border-radius: var(--radius); }