ویژگی border-image-repeat CSS
- صفحه قبل border-image-outset
- صفحه بعدی border-image-slice
تعریف و استفاده
ویژگی border-image-repeat تعیین می‌کند که آیا لبه تصویر باید تکرار شود (تکرار شده)، کشیده شود (کشیده شده) یا پر شود (پر شده).
لطفاً به
آموزش CSS3:کناره‌های CSS3
مثال
تعیین می‌کند که چگونه تصویر لبه‌ها را تکرار کنید:
div
{
border-image-source: url(border.png);
border-image-repeat: round;
}
جملات CSS
border-image-repeat: stretch|repeat|round;
نکته:این ویژگی تعیین می‌کند که چگونه لبه‌ها و بخش‌های میانی تصویر پیرامون لبه‌ها چگونه گسترش یابند و چگونه پوشش داده شوند. بنابراین، شما می‌توانید دو مقدار تعیین کنید. اگر دومین مقدار را حذف کنید، مقدار اولین مقدار را می‌گیرد.
مقدار ویژگی
| مقدار | توضیح |
|---|---|
| stretch | تصاویر را برای پر کردن محدوده کشش دهید |
| repeat | تصاویر پوشاننده (تکرار شده) را برای پر کردن محدوده استفاده کنید. |
| round | مانند مقدار repeat. اگر نتوانید تمام تصاویر را به طور کامل پوشش دهید، تصاویر را برای تطابق با محدوده بزرگ‌نمایی کنید. |
جزئیات فنی
| مقدار پیش‌فرض: | stretch |
|---|---|
| نسبت به ارث: | no |
| نسخه: | CSS3 |
| جملات زبان JavaScript: | object.style.borderImageRepeat="round" |
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه اولین مرورگر پشتیبان از این ویژگی هستند.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
لطفاً به border-image ویژگی.
- صفحه قبل border-image-outset
- صفحه بعدی border-image-slice
