دوستان آيا مي شه با css اطراف جدول رو گرد كرد . اگه مي شه چطوري ؟
Printable View
دوستان آيا مي شه با css اطراف جدول رو گرد كرد . اگه مي شه چطوري ؟
اول یک Div کلاس box ایجاد می کنیم تا همه محتویات رو در اون قرار بدیم. از 4 تگ (مثلا b ) استفاده
میکنیم و 4 کلاس به اونا اختصاص میدیم:
[HTML]<div class="box"><b class="rtop">02<b class="r1"></b>03<b class="r2"></b>04<b class="r3"></b>05<b class="r4"></b></b>06<div>line one<br />line two</div>07<b class="rbot">08<b class="r4"></b>09<b class="r3"></b>10<b class="r2"></b>11<b class="r1"></b></b>12</div>[/HTML]
حالا در CSS ، به کلاس های r3 ، r2 ، r1 و r4 مقادیر Margin رو به صورت زیر اضافه می کنیم:
[HTML].r1{margin:0 5px;}2.r2{margin:0 3px;}3.r3{margin:0 2px;}4.r4{margin:0 1px; height:2px;}[/HTML]
(این مارجین ها (5 و 3 و 2 و 1) گوشه های باکس ما رو به پیکسل به پیکسل کاهش میدن تا گرد به نظر بیاد.)
همونطور که در کد HTML دیدید ، ما b ها رو در 2 تگ بالا و پایین (Rtop و Rbot ) قرار دادیم تا همون
Margin ها به صورت معکوس ،گوشه های پایین رو هم گرد کنند.
حالا کد های زیر رو به CSS اضافه می کنیم:
[HTML].box{background:#67A9DE; margin:0 15px;}
2.box div{margin:0 20px;}3.rtop, .rbot{display:block; background:#FFF;}4.rtop *, .rbot *{display:block; height:1px; background:#67A9DE;overflow:hidden;}[/HTML]
(در کد های بالا، حاشیه ها و رنگ زمینه تنظیم می شوند)
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
باکس ما آماده است! [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ] کد نهایی به این شکل خواهد بود:
[HTML].box{background:#67A9DE; margin:0 15px;}
2.box div{margin:0 20px;}3.rtop, .rbot{display:block; background:#FFF;}4.rtop *, .rbot *{display:block; height:1px; background:#67A9DE;overflow:hidden;}5.r1{margin:0 5px;}6.r2{margin:0 3px;}7.r3{margin:0 2px;}8.r4{margin:0 1px; height:2px;}[/HTML]
منبع:کد:http://www.pasargad-graphic.com/blog/css-rounded-borders/
از کد زیر میشه تو فایرفاکس و کروم استفاده کرد ولی تو IE جواب نمیده، در کل بهترین کار اینه که گوشه های گرد به صورت عکس دربیاری و 4 طرف لایه قرار بدی.
از این سایتم می تونی کمک بگیری:کد:-moz-border-radius: 20px;
-webkit-border-radius: 20px;
کد:http://www.roundedcornr.com/
البته روشی که علیرضا جان فرمودند در همه مرورگر ها جواب میده
عکس هم خوبه بخصوص در زمنهای که بخوای زیبا کاری کنی
موفق باشید
از این روش میتونید در IE هم استفاده کنیدنقل قول:
کافیه تو CSS اون قسمتی که کد بالا رو میدید تا گوشه ها رو گرد کنه کد زیر رو پایینش بدی:
از لینک زیر هم میتونی PIE.htc رو دانلود کنی:کد:behavior: url(PIE.htc);
کد:http://css3pie.com/download-latest
با فایل های htc جز حل این مشکل میتونید خیلی کارهای دیگه که مرورگر های دیگه جواب میدو رو در IE نیز انجام بدید
درستهنقل قول:
فعلاً این دستورات رو پشتیبانی میکنه:
کد:* border-radius
* box-shadow
* border-image
* multiple background images
* linear-gradient background images
درود به دوستان عزیز
از فایل pie.htc تو سایت استفاده کردم مشکلی نداشت فقط مشکل اینجاست که نمیتونم تو وبلاگ ازش استفاده کنم
چطور باید این فایل رو فراخوانی کنم<head>و تو css چطور آدرس رو وارد کنم
:n28:؟
</head>
فرض بر این که من فایل رو اینجا آپلود کرده باشم my30t.ugig.ir/pie.htc
سلام دوستان
بهترین و سرراست ترین برای این کار استفاده از خاصیت border-radius توی css هستش
ولی این رو هم بگم که فقط با css3 کار میکنه
آموزش کاملش رو هم می تونید از سایت من دانلود کنید
اوه اوه اوه شما چرا اینقدر لقمه رو دور می دید بعد غذا می خورید
برید سوپر استایل های سی اس اس و یاد بگیرید اونجا می تونید حتی لوزی هم درست کنید 5 ضلعی یا هر ضلعی که بخواین:n05:
گرد کردن گوشه ها در CSS3
. برای اینکار از ویژگی border-radius استفاده می کنیم.
2
3
4
border-radius:25px;
-moz-border-radius:25px; /* Firefox /* یا قدیمی تر 3.6
}