خطوط حاشیه در CSS 3 - خاصیت border-image
خاصیت border-image در خطوط حاشیه :
به وسیله این خاصیت می توان یک عکس را به عنوان خطوط حاشیه برای یک عنصر به کار برد
. شکل کلی استفاده از این خاصیت به شرح زیر است :
|
Syntax
|
border-image : source width outset repeat ;
مثال : border-image : url(../Pic/border_image.png) 30 30 round ;
|
این خاصیت یک خاصیت چند مقداری بوده و حالت کوتاه و خلاصه شده چندین خاصیت border-image-source,
border-image-width, border-image-outset و border-image-repeat است . برای تعیین خواص
فوق دو راه وجود دارد :
- تعیین مقدار کلیه خواص در خاصیت چند مقداری border-image .
- تعیین هر کدام از خواص به صورت جداگانه .
راه اول راهی بهتر و متداول است . زیرا حجم کدنویسی را کاهش داده و نظم بهتری به کد
نویسی می دهد .
در روش اول در واقع باید مقدار هر کدام از خاصیت های border را به ترتیب قرار داد .
در جداول زیر به توضیح هر یک موارد بالا می پردازیم و سپس با ارایه چند مثال آنها را
در عمل به شما نمایش می دهیم :
|
توضیح
|
این خاصیت آدرس عکسی که قرار است به عنوان خط حاشیه مورد استفاده قرار بگیرد را تعیین
می کند .
اگر مقدار آن برابر با none قرار داده شود ، هیچ عکسی به عنوان خطوط حاشیه به کار برده
نمی شود .
|
این خاصیت عرض خطوط نمایش را تعیین می کند .
مقدار پیش فرض خاصیت width برایر صفر است و می تواند به یکی از 3 حالت زیر مقدار دهی
شود :
- مقدار عددی بر حسب pixel یا pt مثلا px 10 .
- مقدار بر حسب درصد مثلا % 10 .
- قردادن مقدار برابر با auto . که باعث می شود مقدار خود را از عنصر مادر به ارث ببرد
.
|
|
این خاصیت میزان فاصله محتویات درون عنصر با خطوط حاشیه را تعیین می کند .
|
این خاصیت تعیین می کند که اگر عکس مورد نظر برای خطوط حاشیه کوچکتر از مقدار لازم
بود ، آیا برای پوشش کل ناحیه خطوط حاشیه ، تکرار ( repeat ) یا بزرگنمایی ( stretch
) شود . این خاصیت می تواند با یکی از 3 حالت زیر مقدار دهی شود :
- stretch : این مقدار باعث می شود تا عکس برای پوشاندن کل ناحیه خطوط نمایش ، بزرگنمایی
و کشیده تر از حالت معمولی شود .
- repeat : این مقدار باعث می شود تا عکس برای پوشاندن کلیه ناحیه خطوط نمایش ، به دفعات
لازم تکرار شود .
- round : این مقدار باعث می شود تا عکس برای پوشاندن کل ناحیه خطوط نمایش ، به صورت
کاشی وار ( tile ) در تمام ناحیه قرار بگیرد . به عبارت دیگر با تکرار در 2 جهت عمودی
و افقی کل فضا را پوشش خواهد داد .
|
پشتیانی در مرورگر های مختلف :
متاسفانه این خاصیت به صورت عادی توسط هیچ یک از مرورگر های مطرح پشتیانی نمی شود .
برای پشتیبانی در مرورگرهای مختلف باید برای هر کدام ، کد لازم آنها که در جدول زیر
آمده را استفاده نمود :
|
مرورگر فایرفاکس با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی
این مرورگر باید خاصیت را به صورت moz-border-image- بنویسید .
|
|
مرورگر اپرا با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این
مرورگر باید خاصیت را به صورت o-border-image- بنویسید .
|
|
این خاصیت در مرورگر اینترنت اکسپلورر پشتیبانی نمی شود .
|
|
مرورگر کروم با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این
مرورگر باید خاصیت را به صورت webkit-border-image- بنویسید .
|
مثال های عملی :
پس از توضیح روش استفاده از خاصیت و نحوه سازگاری آن با انواع مرورگر ها ، کاربرد آن
را چند مثال به صورت عملی به شما نمایش می دهیم . دقت کنید که اگر مرورگر شما IE باشد
، به علت عدم پشتیبانی این مرورگر از خاصیت border-image ، خروجی ها به صورت صحیح نمایش
داده نخواهند شد :
عکس استفاده شده در مثال ها ، عکس زیر است . منبع :
http://www.3schools.com :
مثال 1 : در مثال اول یک عکس را به عنوان خط حاشیه برای یک
تگ < div > به کار برده و کد اصلی و کد متناسب برای هر نوع مرورگر را به شما
نمایش داده ایم . در کد خاصیت ابتدا آدرس کامل عکس را تعیین کرده و سپس مقدار پارامترهای
width و outset را به ترتیب برابر با 30 و 30 قرار داده ایم . همچنین برای نحوه تکرار
عکس گزینه round برای تکرار ،انتخاب شده است :
< html >
< head >
< style >
div
{
-moz-border-image:url(border.png)
30 30 round; /* Firefox */
-webkit-border-image:url(border.png)
30 30 round; /* Safari and Chrome */
-o-border-image:url(border.png)
30 30 round; /* Opera */
border-image:url(border.png)
30 30 round; /* کد اصلی */
}
< /style >
</head>
<body>
< div > border image example
< /div >
</body>
</html>
|
|
border image example
|
مثال 2 : در مثال دوم ، کد بالا را بازنویسی کرده و در آن مقدار
پارامتر repeat را برابر با stretch قرار داده ایم . تفاوت را در خروجی مثال ها مقایسه
نمایید :
< html >
< head >
< style >
div
{
-moz-border-image:url(border.png)
30 30 stretch; /* Firefox */
-webkit-border-image:url(border.png)
30 30 stretch; /* Safari and Chrome */
-o-border-image:url(border.png)
30 30 stretch; /* Opera */
border-image:url(border.png)
30 30 stretch; /* کد اصلی */
}
< /style >
</head>
<body>
< div > border image example
< /div >
</body>
</html>
|
|
border image example
|