PDA

توجه ! این یک نسخه آرشیو شده میباشد و در این حالت شما عکسی را مشاهده نمیکنید برای مشاهده کامل متن و عکسها بر روی لینک مقابل کلیک کنید : آموزش گرد کردن گوشه ها در CCS3



software
2012/08/13, 10:31 PM
درود
با یک آموزش دیگر از CSS3 با شما هستیم.:دی
ابتدا نمونه ای از آموزش ببینید: لینک (http://softwareha.ugig.ir/border-radius%20css3.html)
گرد کردن گوشه ها در CSS2 بسیار سخت بود و اصلا شاید کاری نبود که هر کسی انجام بده.به همین دلیل توسعه دهنده گان وب تلاش کردند که این کار در نسخه بعدی بسیار راحت انجام بگیرد.
به کد ها می پردازیم.
با استفاده از کد زیر می توان گوشه های تصویر مورد نظرمون به نسبت پیکسل گرد گردد.

border-radius:npx;
در کد بالا منظور از n یک عدد است و همچنین در کد های دیگر در ادامه...
این کد توسط تمامی مرورگر ها ساپورت میشه اما برای عملکرد بهتر به کد های مخصوص هر مرورگر می پردازیم.
در IE9 :

-ms-border-radius:npx;
در Firefox :

-moz-border-radius:npx;
در Opera :

-o-border-radius:npx;

در Safari و Chrome :

-webkit-border-radius:npx;

با تشکر.

Mr.Ramin
2012/08/13, 10:35 PM
تائید شد .
این سایت هم میتونه برای علاقه مندان مفید باشه :
Border Radius Generator | CSS3 Generator | CSS3Gen (http://css3gen.com/border-radius/)

Mr.Mostafa
2012/08/13, 10:39 PM
اگر بخواید هر گوشه به صورت یکسان گرد نشه کد رو به صورت زیر بنویسید :


border-radius: npx npx npx npx

از اول به این ترتیب هستش : بالا سمت چپ - بالا سمت راست - پاین سمت راست - پاین سمت چپ
برای مرورگر های مختلف هم متغیر هایی که در پست اول هست رو اضافه کنید
به جای n هم اعداد مختلف بزارید

software
2012/08/13, 10:47 PM
این سایت هم مخصوص مطلب ذکر شده هست.
CSS Border Radius Generator (http://border-radius.com/)