گرد کردن گوشه ها در CSS3
Borderها در CSS3
با استفاده از CSS3 می توانید گوشه ها را گرد کنید، سایه اضافه کنید و یا از تصاویر برای حاشیه ها استفاده نمایید. (بدون آنکه نیاز به برنامه جانبی دیگری مثل Photoshop داشته باشید)
در این آموزش خواص زیر را فرا خواهید گرفت:
- border-radius
- box-shadow
- border-image
پشتیبانی مرورگرها
| خصوصیت | پشتیبانی مرورگرها | ||||
|---|---|---|---|---|---|
|
border-radius |
 |
 |
 |
 |
 |
|
box-shadow |
|
|
|
|
|
|
border-image |
 |
|
|
|
 |
IE9 خاصیت های border-radius و box-shadow را پشتیبانی می کند.
Firefox, Chrome, Safari همه ی خاصیت های جدید Border را پشتیبانی می کنند.
توجه:نسخه های 5 به قبل Safari برای استفاده از border-image نیاز به پیشوند -webkit- دارند.
Opera خاصیت های border-radius و box-shadow را پشتیبانی می کند، اما برای استفاده از خاصیت border-image نیاز به پیشوند -o- دارد.
گرد کردن گوشه ها در CSS3
اضافه کردن گوشه های گرد در CSS2 بسیار وقت گیر بود. (برای هر گوشه ای باید از یک تصویر استفاده می کردیم)
در CSS3، گرد کردن گوشه ها کار آسانی است.
در CSS3 از ویژگی border-radius برای اینکار استفاده می شود.
مثال (گرد کردن گوشه ها در CSS3)
گرد کردن گوشه های عنصر <div>
{
border:2px solid;
border-radius:25px;
}
اضافه کردن سایه در CSS3
در CSS3 از ویژگی box-shadow برای اضافه کردن سایه استفاده می شود.
مثال (گرد کردن گوشه ها در CSS3)
سایه دادن به عنصر <div>
{
box-shadow: 10px 10px 5px #888888;
}
استفاده از تصویر به عنوان Border در CSS3
با استفاده از خاصیت border-image در CSS3 می توانید از تصویر به عنوان حاشیه استفاده کنید.
تصویر اصلی که برای ساخت border بالا استفاده شده است:
مثال (گرد کردن گوشه ها در CSS3)
استفاده از یک تصویر برای ساخت حاشیه های یک عنصر <div>
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
خاصیت های جدید Border در CSS3
| خاصیت | توضیحات | CSS |
|---|---|---|
| border-image | تنظیم یک عکس به عنوان حاشیه | 3 |
| border-radius | گرد کردن گوشه ها | 3 |
| box-shadow | اضافه کردن سایه | 3 |
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 35183
دیدگاه‌ها
چرا خاصیت های border-radius و box-shadow واسه من عمل نمیکنه !!!!!!
باید عمل کنه!
احتمالا یه جا خطا دارید یا اینکه از مرورگرتون هست.
کدها رو بذارید و اینکه ذکر کنید از چه مرورگری استفاده میکنید، تا بهتر بشه راهنمایی کرد.
ببخشید می خواستم بدونم دو تا عدد 30 در قسمت "استفاده از تصویر به عنوان Border در CSS3" چیکار می کنه؟ من هر چی تغییر دادم نتونستم بفهمم از کجا تا کجای عکس رو با این اعداد انتخاب می کنیم؟
لطفاً به لینک زیر مراجعه نمایید:
www.beyamooz.com/cssref/227-css-properties/777-border-image
ببخشید css3 چطور باید به پروژه اضافه کنیم یعنی چطوری باید برای مرورگر تعریف کنیم که از چه نسخه ای داریم استفاده میکنیم؟ اگر از همه نسخه ها استفاده کنیم چطوری باید کد بنویسیم
بعنوان مثال زمانی که گفته می شود، IE9 به بالا خاصیت های border-radius و box-shadow را پشتیبانی می کنند، منظور این است که برای کاربرانی که نسخه ی مرورگرشان IE9 به پایین است، خصوصیت border-radius و یا box-shadow عمل نخواهد کرد و برای حل شدن این مشلک هیچ راهی وجود ندارد ...!
و اما زمانی که می گوییم، نسخه های 5 به قبل Safari برای استفاده از border-image نیاز به پیشوند -webkit- دارند یعنی اگر می خواهید از خصوصیت border-image استفاده کنید باید برای کاربرانی که از مرورگر Safari نسخه 5 به قبل استفاده می کنند، تمهیداتی را بیاندیشید یعنی باید بصورت زیر عمل کنید:
div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image: url(/border.png) 30 30 round; /* Opera */
}
توجه می کنید که برای درست عمل کردم خصوصیت border-image در Safari و Opera مجبور شدیم دوبار دیگر خصوصیت border-image را با پیشوند ذکر کنیم ...! این کار ناچاراً باید انجام بشه والا خصوصیت مذکور در مرورگرهای ذکر شده عمل نخواهد کرد.