021-20483015

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

بااستفاده از صفت 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;
}
مشاهده مثال

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط