دوره رایگان
CSS3 طراحی وب فرانت اند (Front End)

خمیده کردن گوشه‌ی المان‌ها (Border Radius) در CSS

Border Radius در CSS
نوشته شده توسط مهدی خسروی

در CSS3 امکانی افزوده شده است که با استفاده از آن میتوانید گوشه ی المان های خودتان را بصورت گرد شده و خمیده شده داشته باشید. این خاصیت Border Radius در CSS نام دارد. در این آموزش یاد میگیریم که چطور میتوانیم با استفاده از سی اس اس (CSS) گوشه‌ی المان ها را خمیده یا گرد کنیم.

 

Border Radius در CSS

اگر میخواهید با خاصیت Border Radius در CSS بصورت کامل آشنا شوید، پینشهاد میکنم حتما فایل آموزشی زیر را مشاهده کنید.

 

 

برای اینکه بتوانیم از Border Radius در CSS استفاده کنیم، نیاز هست که مرورگری داشته باشیم که از کدهای CSS3 پیشتیبانی کنند. اگر مرورگر شما یک مرورگر معروف و بروز باشد، از این قابلیت  کاملا پشتیبانی خواهد کرد.

Border Radius قابلیتی است که در آخرین نسخه CSS یعنی سی اس اس ۳ معرفی شده است و به شما کمک میکند که به راحتی گوشه المان هایتان را بصورت گرد شده داشته باشید.

برای استفاده از Border Radius در CSS کافی است که یک المان را در CSS انتخاب کنیم. برای مثال در تکه کد زیر، ما یک div با کلاس mydiv ساخته ایم و در CSS به آن طول و ارتفاع ۲۰۰ پیکسل و رنگ پس زمینه‌ی قرمز را داده‌ایم:

الان میتوانیم از خصوصیت Border Radius در CSS استفاده کنیم. برای اینکار، تکه کد زیر را به کد CSS خود اضافه میکنیم:

با استفاده از اضافه کردن این تک

ه کد به کدهای بالا، خروجی کار ما شبیه به تصویر زیر میشود:

Border Radius در CSS

 

همین کار را دقیقا با عکس ها هم میتوانید انجام دهید. برای مثال اگر بخواهید یک تصویر داشته باشید که گوشه‌هایش گرد و خمیده باشد، Border Radius در CSS به کمک شما خواهد آمد. برای اینکار دوباره یک عکس را انتخاب میکنیم، آنرا با اسفتاده از تگ img وارد صفحه‌ی وب خود میکنیم و کد زیر را برای آن مینویسیم:

با استفاده از این تکه کد، عکسی که در صفحه‌ی وب‌مان وارد کرده بودیم، با اسفتاده از Border Radius در CSS ، گوشه‌هایش به اندازی ۲۰ پیکسل خمیده میشود و به شکل زیر در می‌آید:

Border Radius در CSS

تبدیل یک المان یا عکس به دایره با Border Radius در CSS

شما میتوانید عکس ها یا المان های خودتان را با استفاده از Border Radius در CSS به شکل دایره تبدیل کنید. برای اینکار کافی است که ۲ کار را انجام دهید:

  1. مقدار width و height عکس یا المانی که میخواهید دایره شود را به یک میزان قرار دهید. مثلا هر دوی آ‌ن‌ها ۲۰۰ پیکسل باشد. تا عکس یا المان شما یک شکل مربع به خود بگیرد.
  2. سپس مقدار Border radius آن‌را برابر مقدار %۵۰ قرار دهید.

با استفاده از انجام این ۲ کار، المان یا عکس شما بصورت دایره‌ای شکل نمایش داده میشود:

Border Radius در CSS

 

در این مقاله درباره‌ی Border Radius در CSS صحبت کردیم. با استفاده از خصوصیت Border Radius در CSS میتوان کارهای خیلی جذاب و پیچیده‌ای نیز کرد که در مقالات آینده در یادیفای درباره‌ی آن‌ها صحبت خواهیم کرد.

امتیاز مقاله
  • کیفیت مقاله
  • کیفیت فایل ویدئویی
  • اجرایی بودن مطالب
  • کاربردی بودن مطالب
۴.۹

درباره نویسنده

مهدی خسروی

۸ سال پیش که یادگیری برنامه نویسی رو آغاز کردم، با یک مشکل بزرگ مواجه شدم: کمبود منابع آموزشی حرفه‌ای و کاربردی به زبان فارسی. به همین دلیل، بعد از چندین سال فعالیت حرفه‌ای در زمینه‌ی برنامه نویسی، تصمیم گرفتم دانسته‌ها و تجربیات خودم را با شما عزیزان به اشتراک بگذارم. پیشنهاد میکنم به آدرس yadify.com/gifts حتما سر بزنید :)

درج دیدگاه

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