گرد کردن گوشه‌ عکس ها به کمک css

HTML clipboardیکی از راه‌هایی که ظاهر سایت‌ها را خیلی زیبا میکند و باعث جذابیت آن میشود قسمت‌هایی با گوشه‌های گرد است.
ولی میتوان گفت که این کار یکی از کار‌های تقریبا دشوار میباشد، و این به دلیل تعدد مرورگر‌ها و نحوه‌ی ترجمه‌ی کد‌ها در آنها میباشد.
این کار معمولا با استفاده از تصاویر انجام میشود، ولی من در این مطلب قصد دارم که انجام این کار را با کمک CSS به شما آموزش بدهم.

در CSS سه دسته کد وجود دارد که برای گرد کردن گوشه‌های المانها میتوانیم از آنها استفاده کنیم.

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

كد:
border-radius
border-top-right-radius
border-top-left-radius
border-bottom-right-radius
border-bottom-left-radius
این کد‌ها به ترتیب، کل گوشه‌ها، گوشه‌ بالا راست، گوشه بالا چپ، پایین راست و پایین چپ را گرد میکنند.

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

Name:  01.gif Views: 12 Size:  1.0 Kb
كد:
-moz-border-radius: 5px;
Name:  02.gif Views: 12 Size:  1.2 Kb
كد:
-moz-border-radius-topright: 5px;
Name:  03.gif Views: 12 Size:  1.2 Kb
كد:
-moz-border-radius-topleft: 5px;
Name:  04.gif Views: 12 Size:  1.2 Kb
كد:
-moz-border-radius-bottomright: 5px;
Name:  05.gif Views: 12 Size:  1.2 Kb
كد:
-moz-border-radius-bottomleft: 5px;
دسته سوم کدهایی هستند که در مرورگر سافاری و مرورگر جدید گوگل کروم کار میکنند.
این کد‌ها هم بصورت زیر هستند :
كد:
-webkit-border-radius: 5px;
كد:
-webkit-border-top-right-radius: 5px;
كد:
-webkit-border-top-left-radius: 5px;
كد:
-webkit-border-bottom-right-radius: 5px;
كد:
-webkit-border-bottom-left-radius: 5px;

2 Responses to گرد کردن گوشه‌ عکس ها به کمک css

  1. اولی فقط در مرورگر اینترنت اکسپلورر اجرا می‌شود یا در تمام مرورگر ها؟
    و دومی که فقط در مرورگر موزیلا فایرفاکس کار می کند…
    توضیح بده، کسی که می خواهد این کار را طوری انجام دهد، که کاربران هر مرورگری آن را بدون مشکل ببینند، باید چه کار کند؟
    از هر دو استفاده کند؟

  2. mardak می‌گه:

    سلام
    من به شما jquery رو پیشنهاد میکنم برای اینکار تا در اکثر مرورگر ها مشکلی نداشته باشید این css طبق توضیحی که داده شده در بعضی از مرورگر ها و یا بهتر بگم اکثرشون یکم قاطی میزنه ! :دی

    تشکر//

پاسخی بگذارید

در پایین مشخصات خود را پر کنید یا برای ورود روی شمایل‌ها کلیک نمایید:

نشان‌وارهٔ وردپرس.کام

شما در حال بیان دیدگاه با حساب کاربری WordPress.com خود هستید. بیرون رفتن / تغییر دادن )

تصویر توییتر

شما در حال بیان دیدگاه با حساب کاربری Twitter خود هستید. بیرون رفتن / تغییر دادن )

عکس فیسبوک

شما در حال بیان دیدگاه با حساب کاربری Facebook خود هستید. بیرون رفتن / تغییر دادن )

عکس گوگل+

شما در حال بیان دیدگاه با حساب کاربری Google+ خود هستید. بیرون رفتن / تغییر دادن )

درحال اتصال به %s

%d وب‌نوشت‌نویس این را دوست دارند: