PDA

نسخه کامل مشاهده نسخه کامل : گرد كردن اطراف جدول با css


m p c
07-10-2010, 16:43
دوستان آيا مي شه با css اطراف جدول رو گرد كرد . اگه مي شه چطوري ؟
amirreza22
07-10-2010, 16:59
اول یک Div کلاس box ایجاد می کنیم تا همه محتویات رو در اون قرار بدیم. از 4 تگ (مثلا b ) استفاده
میکنیم و 4 کلاس به اونا اختصاص میدیم:

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

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

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
(در کد های بالا، حاشیه ها و رنگ زمینه تنظیم می شوند)
[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]
باکس ما آماده است! [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] کد نهایی به این شکل خواهد بود:

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



منبع:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
Guts
07-10-2010, 17:00
از کد زیر میشه تو فایرفاکس و کروم استفاده کرد ولی تو IE جواب نمیده، در کل بهترین کار اینه که گوشه های گرد به صورت عکس دربیاری و 4 طرف لایه قرار بدی.


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

از این سایتم می تونی کمک بگیری:


برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
satropat
14-10-2010, 01:33
البته روشی که علیرضا جان فرمودند در همه مرورگر ها جواب میده
عکس هم خوبه بخصوص در زمنهای که بخوای زیبا کاری کنی


موفق باشید
PersianSharing
05-12-2010, 23:25
از کد زیر میشه تو فایرفاکس و کروم استفاده کرد ولی تو IE جواب نمیده، در کل بهترین کار اینه که گوشه های گرد به صورت عکس دربیاری و 4 طرف لایه قرار بدی.


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

از این سایتم می تونی کمک بگیری:


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

از این روش میتونید در IE هم استفاده کنید
کافیه تو CSS اون قسمتی که کد بالا رو میدید تا گوشه ها رو گرد کنه کد زیر رو پایینش بدی:

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

از لینک زیر هم میتونی PIE.htc رو دانلود کنی:

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
Web Design
06-12-2010, 08:39
با فایل های htc جز حل این مشکل میتونید خیلی کارهای دیگه که مرورگر های دیگه جواب میدو رو در IE نیز انجام بدید
PersianSharing
06-12-2010, 10:22
با فایل های htc جز حل این مشکل میتونید خیلی کارهای دیگه که مرورگر های دیگه جواب میدو رو در IE نیز انجام بدید

درسته
فعلاً این دستورات رو پشتیبانی میکنه:

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
kamyar73
16-07-2013, 15:50
درود به دوستان عزیز
از فایل pie.htc تو سایت استفاده کردم مشکلی نداشت فقط مشکل اینجاست که نمیتونم تو وبلاگ ازش استفاده کنم
چطور باید این فایل رو فراخوانی کنم
<head>
:n28:؟
</head>

و تو css چطور آدرس رو وارد کنم
فرض بر این که من فایل رو اینجا آپلود کرده باشم my30t.ugig.ir/pie.htc
abmkop
26-08-2013, 21:29
سلام دوستان
بهترین و سرراست ترین برای این کار استفاده از خاصیت border-radius توی css هستش
ولی این رو هم بگم که فقط با css3 کار میکنه
آموزش کاملش رو هم می تونید از سایت من دانلود کنید
عروس دریایی
02-10-2013, 10:37
اوه اوه اوه شما چرا اینقدر لقمه رو دور می دید بعد غذا می خورید
برید سوپر استایل های سی اس اس و یاد بگیرید اونجا می تونید حتی لوزی هم درست کنید 5 ضلعی یا هر ضلعی که بخواین:n05:
بانو . ./
30-10-2013, 21:52
گرد کردن گوشه ها در CSS3
. برای اینکار از ویژگی border-radius استفاده می کنیم.










1

2
3
4



div {
border-radius:25px;
-moz-border-radius:25px; /* Firefox /* یا قدیمی تر 3.6
}