گرد کردن گوشه های خود

به‌طور پیش‌فرض، فرم‌های HTML حتی پس از افزودن برخی استایل‌های CSS تا حدودی خسته‌کننده هستند.

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

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

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

ویژگی گوشه های گرد را به تنهایی و جدا از استاندارد CSS اضافه کرد.

متأسفانه، همانطور که ممکن است حدس بزنید، مرورگرهای مختلف از روش های مختلفی برای این کار استفاده می کردند.

اجرای گوشه های گرد تلاش برای نوشتن سبکی که در همه موارد کارساز باشد مرورگرها هم سخت و هم گیج کننده شدند.

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

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

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

به جای مربع های استاندارد گرد شده است. که تفاوت زیادی در ظاهر فرم وب با این حال، چیزی که می‌تواند با ویژگی شعاع مرزی گیج‌کننده شود این است که وجود دارد چهار فرمت مختلف برای استفاده از آن – با یک، دو، سه یا چهار پارامتر.

پارامتر واحد زیر شعاع هر چهار گوشه را روی 10 پیکسل تنظیم می کند: شعاع مرزی: 10 پیکسل.

دو پارامتر زیر شعاع بالا-چپ و پایین-راست را تعیین می کنند گوشه ها تا 10 پیکسل، اما گوشه های بالا سمت راست و پایین سمت چپ تا 5 پیکسل:

border-radius: 10 پیکسل 5 پیکسل؛

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

گوشه بالا سمت راست و پایین سمت چپ به 5 پیکسل و گوشه پایین سمت راست به 3 پیکسل: حاشیه-شعاع: 10px 5px 3px;

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

گوشه بالا سمت راست به 5 پیکسل، گوشه پایین سمت راست به 3 پیکسل، و پایین

گوشه سمت چپ تا 1 پیکسل:

border-right: 10px 5px 3px 1px;

وقتی بتوانید شعاع هر گوشه یا جفت گوشه را تنظیم کنید، شما

می تواند چندین جلوه ویژه مختلف مانند حباب های گفتگو یا بیضی ایجاد کند.

همچنین می‌توانید مقادیر شعاع گوشه‌ها را مستقل از یکدیگر تنظیم کنید

با چند ویژگی اضافی:

»» شعاع مرزی-بالا-چپ

»»مرز-بالا-راست-شعاع

»» شعاع حاشیه-پایین-چپ

»»مرز-پایین-راست-شعاع

هر یک مقدار شعاع مرزی مربوطه را در عنصر تعیین می کند.

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

گوشه. می توانید اندازه را با استفاده از هر یک از اندازه گیری های واحد اندازه استاندارد CSS مانند اینچ، پیکسل یا واحد em مشخص کنید