امروز : چهارشنبه ۴ مرداد ۱۳۹۶
حذف تبلیغات


ad

گوشه های گرد در CSS3،بررسی بوردر ردیوس

 

download

 

با به روی کار آمدن html5 و CSS3 دنیای طراحی وب تغییری اساسی کرد. امکانات بسیار زیادی به نسخه های جدید html و css شده که تقریبا هر چیزی را طراحی کنید ،  امروز میخوایم درباره گوشه های گرد به طور کامل صحبت کنید ، گوشه های گرد رو میتونید با استقاده از Border-radius ایجاد کنید.

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

خوب معمولی ترین border-radius به این صورت هست :

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

برای این که هر گوشه رو جداگانه گرد کنیم اونجوری عمل میکنیم :

همش همین نبود ، به وسیله border-radius میتونیم گردی افقی و عمودی هر گوشه را کنترل کنیم :

همچنین میتونم به هر گوشه به طور جداگانه این خاصیت رو اعمال کنیم :

یا

خوب مسائل اساسی border-radius را گفتیم ، برای ورژن های قدیمی مرورگر های فایرفاکس و کروم باید از -webkit و -moz استفاده کنیم که استفاده از -moz کمی متفاوت با چیزی است که تاحالا گفتیم

برای -webkit هم کافیست به جای border-radius بنویسید  : -webkit-border-radius

 

 

 

 

لینک کوتاه :http://www.rahjo.net/dlscript/?p=712

عضویت