حاشیه های تصویری در CSS3

یادگیری CSS

تعداد بازدید : 2421

تاریخ و ساعت انتشار : شنبه 7 مرداد 1396 13:00

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

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

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

شماره هایی که با عبارات -webkit- یا -moz- یا -o- همراه هستند نشان دهنده اولین نسخه ای هستند که با prefix کار می کند.

صفت

کروم

اکسپلورر

فایرفاکس

سافاری

اپرا

border-image

16.0

11.0

15.0

6.0

15.0

صفت border-image در CSS3

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

صفتborder-image از سه بخش تشکیل شده است :

1- تصویری که به عنوان حاشیه استفاده می شود

2- از کجای تصویر برش انجام می شود

3- تعیین اینکه قسمت میانی باید تکرار شود یا گسترده شود.

از تصویر زیر به عنوان حاشیه استفاده خواهیم کرد ( نام فایل border.png خواهد بود).

حاشیه تصویر

صفت border-image تصویر مورد نظر را به 9 بخش تقسیم خواهد کرد (مانند جدول 3 در 3 سودوکو). سپس گوشه ها را در گوشه ها قرار می دهد و بخش های میانی به نحوی که شما تعیین کرده اید یا تکرار می شوند و یا کشیده می شوند.

نکته ! برای اینکه صفت border-image عمل کند ، عنصر به صفت border نیز نیاز دارد.

در مثال زیر بخش میانی تصویر تکرار شده است تا حاشیه ایجاد شود.

مثال :

حاشیه تصویری

#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

مقادیر متفاوت برش ظاهر حاشیه را تغییر می دهد.

مثال :

مقادیر متفاوت برش تصویر حاشیه

#borderimg1 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 50 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 50 round; /* Opera 11-12.1 */
    border-image: url(border.png) 50 round;
}

#borderimg2 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */
    border-image: url(border.png) 20% round;
}

#borderimg3 {
    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;
}

مشاهده مثال

دانلود فایل PDF مقاله درس بعدی درس قبلی

نظر شما

عضویت در خبرنامه شرکت نرم افزاری وب مهراز

برای اطلاع از بسته ها ، تخفیف های استثنایی و تازه های ما به خبرنامه وب مهراز بپیوندید.