ورود به کارتابل مشتریان وب مهراز
حاشیه های تصویری در CSS3
یادگیری CSSبااستفاده از صفت border-image در CSS3 می توان یک تصویر را به عنوان حاشیه دور یک عنصر تعیین کرد.
پشتیبانی مرورگرها
شماره روبروی هر مرورگر نشان دهنده اولین نسخه پشتیبانی کننده از صفت border-image می باشد.
شماره هایی که با عبارات -webkit- یا -moz- یا -o- همراه هستند نشان دهنده اولین نسخه ای هستند که با prefix کار می کند.
صفت 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;
}
نظر شما
>