استفاده از تصاویر به عنوان لبه (border) در CSS3

با استفاده از خاصیت border-image در CSS3 می توانید از یک عکس به عنوان لبه برای عنصر استفاده کنید.

پشتیبانی مرورگرها

Property
border-image	11.0	16.0 4.0 -webkit-	15.0 3.5 -moz-	6.0 3.1 -webkit-	15.0 11.0 -o-

مرورگرهای Firefox, Chrome, Safari 6، خصوصیت border-image را پشتیبانی می کنند.

مرورگر Opera به پیشوند -o- نیاز دارد.

مرورگر Safari 5 به پیشوند -webkit- نیاز دارد.

خاصیت border-image در CSS3

این خاصیت در CSS3 به شما این امکان را می دهد که بجای لبه های نرمال از یک عکس به عنوان لبه استفاده کنید.

خاصیت border-image سه قسمت دارد :

ما از عکس زیر استفاده می کنیم ("border.png"):

مثال :

boreder-images.jpg

#borderimg {

border: 10px solid transparent;

padding: 15px;

-webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */

-o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */

border-image: url(border.png) 30 round;

}

در اینجا قسمت میانی (برش خورده) عکس ، کشیده شده و از آن به عنوان حاشیه (لبه) استفاده شده است :

#borderimg {

border: 10px solid transparent;

padding: 15px;

-webkit-border-image: url(border.png) 30 stretch; /* Safari 3.1-5 */

-o-border-image: url(border.png) 30 stretch; /* Opera 11-12.1 */

border-image: url(border.png) 30 stretch;

}

با استفاده از خصوصیت مختصر border-image، می توانید در یک مرحله خصوصیت های زیر را تعیین نمایید:

خاصیت های Border در CSS

خاصیت	توضیحات
border-image	در یک مرحله border-image-* تنظیم تمام خصوصیات
border-image-source	تعیین مسیر عکس مورد نظر
border-image-slice	تعیین چگونگی برش عکس مورد
border-image-width	border image تعیین عرض
border-image-repeat	نحوه نمایش تصویر در حاشیه را مشخص می کند تکرار شود (repeat) با تغییر اندازه تصویر، بدون برش از ابتدا تا انتهای ناحیه بصورت یکسان تکرار شود (round) کشیده شود (stretch)