آگهی رایگان

دستور Border radius در CSS3

border-radius

در این قسمت از سری آموزش های دوران طراحی وب به موضوع زیبا سازی تگ های درون صفحه می رسیم . در این قسمت دستور border radius در زبان css3 مورد بررسی قرار می دهیم .دستور border radius که در ورژن ۳ از نسخه زبان css معرفی شد برای گرد کردن اشیاء درون صفحه استفاده می شود البته این دستور از مرورگر های IE ورژن ۹ به بالا و اکثر مرورگر های دیگر پشتیبانی می شود . در ادامه نحوه استفاده از این دستور را بررسی می کنیم .

1

 

نحوه استفاده از این دستور در زبان CSS به صورت زیر می باشد :

[css]

.selector {
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
-ms-border-radius:10px;
}[/css]

دستور بالا تگی با خاصیت کلاس selector را گوشه های این المنت رو به میزان ۱۰ پیکسل گرد خواهد کرد . توجه داشته باشید که در خط های بعدی دستور border radius دستوراتی برای اعمال این دستور در مرورگر های مختلف می باشد که اگر حتما می خواهید صفحه شما در تمامی مرورگر ها به یک شکل باشند باید از این دستور ها استفاده کنید .

توجه داشته باشید که مقدار دستور border radius می تواند به صورت واحد های مختلف زبان css مانند em , percent , px,… باشد

تغییر جز به جزء گوشه ها

جهت تغییر هر یک از گوشه های المنت در این دستور به صورت زیر تنظیم می شود :

2

[css]

.selector {
border-radius:1 2 3 4;
}[/css]

در دستور بالا با توجه به شکل ترتیب گرد کردن گوشه اشیاء مشخص شده است که در واقع عدد هایی که در دستور border radius به کار رفته اند دقیقا باید مطابق شکل تنظیم شوند مانند دستور زیر :

[css]

.selector {
border-radius:10px 5px 10px 5px;
}[/css]

نکته : برای گرد کردن شئ و تبدیل آن به یک دایره باید میزان border radius را برابر %۱۰۰ قرار دهیم

 

به این ترتیب به پایان این قسمت از سری آموزش های دوران طراحی وب رسیدیم , امیدوارم از این آموزش لذت کافی رو ببرید ! در ضمن نکته ای دیگر این که نظرات مقداری کم رنگ شده امیدوارم با دیدگاه های خوبتون پر رنگ تر بشه

موفق و پیروز و سربلند باشید

 

 


دیدگاه ها برای دستور Border radius در CSS3

  • باسلام خدمت شما دوست عزیز
    میخواستم اگر امکان دارد راهنماییم کنید که چطوری اواتر وردپرس رو عوض کم

    سید مصطفی مرداد ۲۶, ۱۳۹۲ ۲۰:۰۹ پاسخ دادن
  • بسیار متشکر

    معصومه مرداد ۲۶, ۱۳۹۲ ۲۰:۴۱ پاسخ دادن
  • درود ، عالی بود دوست عزیز

    مهرزاد موسوی پور مرداد ۲۶, ۱۳۹۲ ۲۱:۰۱ پاسخ دادن
  • سلام خیلی ممنونم.اما فیلم های آموزشی زیاد بزارید باحجم متوسط. تشکر سایتتون بی نظظیر!!!!!!!!!!!!!!!!

    sajjad = ronaldo شهریور ۲۷, ۱۳۹۳ ۲۱:۵۹ پاسخ دادن
  • اموزش عالی بود

    ممنون

    طراحی سایت دی ۹, ۱۳۹۴ ۱۵:۴۵ پاسخ دادن
  • ای فدای تووووو

    محمد حسین شهریور ۲۸, ۱۳۹۵ ۰۰:۴۹ پاسخ دادن

پاسخ به محمد حسین لغو پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *