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 |
احتمالا یه جا خطا دارید یا اینکه از مرورگرتون هست.
کدها رو بذارید و اینکه ذکر کنید از چه مرورگری استفاده میکنید، تا بهتر بشه راهنمایی کرد.
www.beyamooz.com/cssref/227-css-properties/777-border-image
و اما زمانی که می گوییم، نسخه های 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 را با پیشوند ذکر کنیم ...! این کار ناچاراً باید انجام بشه والا خصوصیت مذکور در مرورگرهای ذکر شده عمل نخواهد کرد.