دليل CSS

قواعد CSS (RULES)

موسوعة الخاصيات CSS

طريقة استخدام خاصية border-image-source في CSS3 ومثال

تحدد خاصية border-image-source الخاصية CSS موضع الصورة المستخدمة للحدود بدلاً منborder-styleنمط الحدود المحدد من قبل الخاصية.

التالي هو جدول يوضح استخدام هذه الخاصية وتاريخ إصداراتها، بالإضافة إلى синтكسها في سكربتات الجافا سكريبت.

القيمة الافتراضية:	none
تنطبق على:	هذا الخاصية يمكن تطبيقها على أي عنصر، ولكن عندما يكون قيمة خاصية border-collapse لـ عناصر الجدول (مثل tr,th,td) هي collapse، فإن خاصية border-image-source غير صالحة. إنها تنطبق أيضًا على::first-letter.
الوراثة:	لا
التحريك:	لايرجى الرجوع إلى خصائص الرسوم المتحركة.
الإصدار:	أدوات CSS3 الجديدة
قواعد اللغة الخاصة بـJavaScript:	object.style.borderImageSource="url(border.png)"

قواعد اللغة الخاصة بخصائص border-image-source

قواعد اللغة الخاصة بهذه الخاصية هي:

border-image-source:　none　|　image　|　initial　|　inherit

المثال التالي يوضح كيفية استخدام خاصية border-image-source.

مثال

.box　{
　　　　العرض:　300px;
　　　　الارتفاع:　150px;
　　　　border-image-source:　url("border.png");
　　　　border-image-slice:　30;
　　　　border-image-repeat:　round;
}

التحقق من‹/›

قيمة الخاصية

جدول التالي يصف قيمة هذه الخاصية.

القيمة	الوصف
none	لا توجد صورة حدود، سيتم استخدام نمط الحدود. وهي القيمة الافتراضية.
image	تحديد موقع صورة الحدود.
initial	اعتماد هذا الخصائص إلى قيمته الافتراضية.
inherit	إذا تم تحديد، فإن العناصر المرتبطة تأخذ قيمة حساب خاصية border-image-source الخاصة بالعنصر الأم.

التطابق في المتصفح

مستوى التطابق للمتصفحات الخاصة بخصائص border-image-source، الأرقام في الجدول التالي تعبر عن أحدث إصدار من المتصفح يدعم هذه الخاصية؛ جميع المتصفحات الرئيسية يدعمون هذه الخاصية.

	Firefox 15+ Google Chrome15+ Internet Explorer 11+ Apple Safari 6+ Opera 15+

قراءة إضافية

يرجى الرجوع إلى الدروس التالية:CSS3 BorderوCSS Border.

خصائص مرتبطة:border-image,border-image-width,border-image-repeat,border-image-slice,border-image-outset,border.

خصائص width للجدار خصائص slice للجدار