با به روی کار آمدن html5 و CSS3 دنیای طراحی وب تغییری اساسی کرد. امکانات بسیار زیادی به نسخه های جدید html و css شده که تقریبا هر چیزی را طراحی کنید ، امروز میخوایم درباره گوشه های گرد به طور کامل صحبت کنید ، گوشه های گرد رو میتونید با استقاده از Border-radius ایجاد کنید.
خیلی از طراحان با خاصیت border-radius آشنا هستند اما در واقع این خاصیت چیزی بیشتر از border-radius : 5px; هست ، امروز یکم عمیق تر این خاصیت رو بررسی میکنیم و به شما نشون میدیم که چجوری میشه تک تک گوشه ها رو گرد کرد یا اینکه چجوری میشه به صورت افقی و عمودی گوشه ها را گرد کرد.
خوب معمولی ترین border-radius به این صورت هست :
|
1 |
Border-radius : 5px; |
که تمام گوشه ها را به اندازه ۵ پیکسل گرد میکند.
برای این که هر گوشه رو جداگانه گرد کنیم انجوری عمل میکنیم :
|
1 2 3 4 |
border-top-left-radius : 8px; border-top-right-radius : 7px; border-bottom-left-radius : 6px; border-bottom-right-radius: 10px; |
همش همین نبود ، به وسیله border-radius میتونیم گردی افقی و عمودی هر گوشه را کنترل کنیم :
|
1 |
border-radius:150px/200px; |
همچنین میتونم به هر گوشه به طور جداگانه این خاصیت رو اعمال کنیم :
|
1 |
border-radius:108px 108px 108px 94px/128px 128px 128px 128px; |
یا
|
1 2 3 4 |
border-top-left-radius:150px 200px; border-top-right-radius:150px 200px; border-bottom-left-radius:150px 200px; border-bottom-right-radius:150px 200px; |
خوب مسائل اساسی border-radius را گفتیم ، برای ورژن های قدیمی مرورگر های فایرفاکس و کروم باید از -webkit و -moz استفاده کنیم که استفاده از -moz کمی متفاوت با چیزی است که تاحالا گفتیم :
|
1 2 3 4 |
-moz-border-radius-topright: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; |
برای -webkit هم کافیست به جای border-radius بنویسید : -webkit-border-radius