آموزش گوشه های گرد با css

[Patira 49]

این ترفند برای ساخت باکس هایی با گوشه گرد با استفاده از CSS استفاده میشه.

تفاوت این روش با روش CSS3 و Border-radius اینه که حتی تو اینترنت اکسپلورر 6 هم مشکل نداره!

 

 

این روش بدون استفاده از عکس یا جی کوئری و با استفاده از چهار Element با Margin های متفاوت انجام

میشه و در همه مرورگر ها ( حتی IE ) کار می کنه.

اول یک Div کلاس box ایجاد می کنیم تا همه محتویات رو در اون قرار بدیم. از 4 تگ (مثلا b ) استفاده

میکنیم و 4 کلاس به اونا اختصاص میدیم:

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

حالا در CSS ، به کلاس های r3 ، r2 ، r1 و r4 مقادیر Margin رو به صورت زیر اضافه می کنیم:

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

(این مارجین ها (5 و 3 و 2 و 1) گوشه های باکس ما رو به پیکسل به پیکسل کاهش میدن تا گرد به نظر بیاد.)همونطور که در کد HTML دیدید ، ما b ها رو در 2 تگ بالا و پایین (Rtop و Rbot ) قرار دادیم تا همونMargin ها به صورت معکوس ،گوشه های پایین رو هم گرد کنند.حالا کد های زیر رو به CSS اضافه می کنیم:

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

(در کد های بالا، حاشیه ها و رنگ زمینه تنظیم می شوند)

 

 

باکس ما آماده است! کد نهایی به این شکل خواهد بود:

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

شما می تونید با تغییر دادن کد شکل های جدید هم درست کنید.

گوشه های مربع:

 

 

[left][color=#666600][font=Segoe UI].[/font][/color][color=#000000][font=Segoe UI]box[/font][/color][color=#666600][font=Segoe UI]{[/font][/color][color=#000000][font=Segoe UI]background[/font][/color][color=#666600][font=Segoe UI]:[/font][/color][color=#880000][font=Segoe UI][url=http://www.noandishaan.com/forums/usertag.php?do=list&action=hash&hash=67A9DE]#67A9DE[/url] margin:0 15px;} .box div{margin:0 20px;} .rtop, .rbot{display:block; background:[url=http://www.noandishaan.com/forums/usertag.php?do=list&action=hash&hash=FFF]#FFF[/url]} .rtop *, .rbot *{display:block; height:1px; background:[url=http://www.noandishaan.com/forums/usertag.php?do=list&action=hash&hash=67A9DE]#67A9DE[/url]overflow:hidden;} .r1{margin:0 5px;} .r2{margin:0 5px;} .r3{margin:0 5px;} .r4{margin:0 5px; height:2px;}[/font][/color][/left]

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

یا می تونید با حذف المنت rbot و محتویاتش از کد HTML کاری کنید که فقط گوشه های بالا گرد باشند:

 

 

[left][color=#666600][font=Segoe UI]&[/font][/color][color=#000000][font=Segoe UI]amp[/font][/color][color=#666600][font=Segoe UI];[/font][/color][color=#000000][font=Segoe UI]lt[/font][/color][color=#666600][font=Segoe UI];[/font][/color][color=#000000][font=Segoe UI]div [/font][/color][color=#000088][font=Segoe UI]class[/font][/color][color=#666600][font=Segoe UI]=&[/font][/color][color=#000000][font=Segoe UI]amp[/font][/color][color=#666600][font=Segoe UI];[/font][/color][color=#000000][font=Segoe UI]quot[/font][/color][color=#666600][font=Segoe UI];[/font][/color][color=#000000][font=Segoe UI]box[/font][/color][color=#666600][font=Segoe UI]&[/font][/color][color=#000000][font=Segoe UI]amp[/font][/color][color=#666600][font=Segoe UI];[/font][/color][color=#000000][font=Segoe UI]quot[/font][/color][color=#666600][font=Segoe UI];&[/font][/color][color=#000000][font=Segoe UI]amp[/font][/color][color=#666600][font=Segoe UI];[/font][/color][color=#000000][font=Segoe UI]gt[/font][/color][color=#666600][font=Segoe UI];&[/font][/color][color=#000000][font=Segoe UI]amp[/font][/color][color=#666600][font=Segoe UI];[/font][/color][color=#000000][font=Segoe UI]lt[/font][/color][color=#666600][font=Segoe UI];[/font][/color][color=#000000][font=Segoe UI]b[/font][/color][color=#000088][font=Segoe UI]class[/font][/color][color=#666600][font=Segoe UI]=&[/font][/color][color=#000000][font=Segoe UI]amp[/font][/color][color=#666600][font=Segoe UI];[/font][/color][color=#000000][font=Segoe UI]quot[/font][/color][color=#666600][font=Segoe UI];[/font][/color][color=#000000][font=Segoe UI]rtop[/font][/color][color=#666600][font=Segoe UI]&[/font][/color][color=#000000][font=Segoe UI]amp[/font][/color][color=#666600][font=Segoe UI];[/font][/color][color=#000000][font=Segoe UI]quot[/font][/color][color=#666600][font=Segoe UI];&[/font][/color][color=#000000][font=Segoe UI]amp[/font][/color][color=#666600][font=Segoe UI];[/font][/color][color=#000000][font=Segoe UI]gt[/font][/color][color=#666600][font=Segoe UI];[/font][/color][color=#000000][font=Segoe UI] [/font][/color][color=#666600][font=Segoe UI]&[/font][/color][color=#000000][font=Segoe UI]amp[/font][/color][color=#666600][font=Segoe UI];[/font][/color][color=#000000][font=Segoe UI]lt[/font][/color][color=#666600][font=Segoe UI];[/font][/color][color=#000000][font=Segoe UI]b[/font][/color][color=#000088][font=Segoe UI]class[/font][/color][color=#666600][font=Segoe UI]=&[/font][/color][color=#000000][font=Segoe UI]amp[/font][/color][color=#666600][font=Segoe UI];[/font][/color][color=#000000][font=Segoe UI]quot[/font][/color][color=#666600][font=Segoe UI];[/font][/color][color=#000000][font=Segoe UI]r1[/font][/color][color=#666600][font=Segoe UI]&[/font][/color][color=#000000][font=Segoe UI]amp[/font][/color][color=#666600][font=Segoe UI];[/font][/color][color=#000000][font=Segoe UI]quot[/font][/color][color=#666600][font=Segoe UI];&[/font][/color][color=#000000][font=Segoe UI]amp[/font][/color][color=#666600][font=Segoe UI];[/font][/color][color=#000000][font=Segoe UI]gt[/font][/color][color=#666600][font=Segoe UI];&[/font][/color][color=#000000][font=Segoe UI]amp[/font][/color][color=#666600][font=Segoe UI];[/font][/color][color=#000000][font=Segoe UI]lt[/font][/color][color=#666600][font=Segoe UI];[/font][/color][color=#008800][font=Segoe UI]/b> <b class="r2"></[/font][/color][color=#000000][font=Segoe UI]b[/font][/color][color=#666600][font=Segoe UI]&[/font][/color][color=#000000][font=Segoe UI]amp[/font][/color][color=#666600][font=Segoe UI];[/font][/color][color=#000000][font=Segoe UI]gt[/font][/color][color=#666600][font=Segoe UI];[/font][/color][color=#000000][font=Segoe UI] [/font][/color][color=#666600][font=Segoe UI]&[/font][/color][color=#000000][font=Segoe UI]amp[/font][/color][color=#666600][font=Segoe UI];[/font][/color][color=#000000][font=Segoe UI]lt[/font][/color][color=#666600][font=Segoe UI];[/font][/color][color=#000000][font=Segoe UI]b[/font][/color][color=#000088][font=Segoe UI]class[/font][/color][color=#666600][font=Segoe UI]=&[/font][/color][color=#000000][font=Segoe UI]amp[/font][/color][color=#666600][font=Segoe UI];[/font][/color][color=#000000][font=Segoe UI]quot[/font][/color][color=#666600][font=Segoe UI];[/font][/color][color=#000000][font=Segoe UI]r3[/font][/color][color=#666600][font=Segoe UI]&[/font][/color][color=#000000][font=Segoe UI]amp[/font][/color][color=#666600][font=Segoe UI];[/font][/color][color=#000000][font=Segoe UI]quot[/font][/color][color=#666600][font=Segoe UI];&[/font][/color][color=#000000][font=Segoe UI]amp[/font][/color][color=#666600][font=Segoe UI];[/font][/color][color=#000000][font=Segoe UI]gt[/font][/color][color=#666600][font=Segoe UI];&[/font][/color][color=#000000][font=Segoe UI]amp[/font][/color][color=#666600][font=Segoe UI];[/font][/color][color=#000000][font=Segoe UI]lt[/font][/color][color=#666600][font=Segoe UI];[/font][/color][color=#008800][font=Segoe UI]/b> <b class="r4"></[/font][/color][color=#000000][font=Segoe UI]b[/font][/color][color=#666600][font=Segoe UI]&[/font][/color][color=#000000][font=Segoe UI]amp[/font][/color][color=#666600][font=Segoe UI];[/font][/color][color=#000000][font=Segoe UI]gt[/font][/color][color=#666600][font=Segoe UI];&[/font][/color][color=#000000][font=Segoe UI]amp[/font][/color][color=#666600][font=Segoe UI];[/font][/color][color=#000000][font=Segoe UI]lt[/font][/color][color=#666600][font=Segoe UI];[/font][/color][color=#008800][font=Segoe UI]/b> <div>line one<br /[/font][/color][color=#666600][font=Segoe UI]&[/font][/color][color=#000000][font=Segoe UI]amp[/font][/color][color=#666600][font=Segoe UI];[/font][/color][color=#000000][font=Segoe UI]gt[/font][/color][color=#666600][font=Segoe UI];[/font][/color][color=#000000][font=Segoe UI]line two[/font][/color][color=#666600][font=Segoe UI]&[/font][/color][color=#000000][font=Segoe UI]amp[/font][/color][color=#666600][font=Segoe UI];[/font][/color][color=#000000][font=Segoe UI]lt[/font][/color][color=#666600][font=Segoe UI];[/font][/color][color=#008800][font=Segoe UI]/div> <!--rbot deleted--> </[/font][/color][color=#000000][font=Segoe UI]div[/font][/color][color=#666600][font=Segoe UI]&[/font][/color][color=#000000][font=Segoe UI]amp[/font][/color][color=#666600][font=Segoe UI];[/font][/color][color=#000000][font=Segoe UI]gt[/font][/color][color=#666600][font=Segoe UI];[/font][/color][/left]

 

یا فقط یک گوشه گرد باشد و….