دليل CSS

قواعد CSS (RULES)

مجملة CSS الكاملة

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

خصائص border-image-width CSS تحدد عرض الحدود.

الجدول أدناه يوضح كيفية استخدام هذه الخاصية وتاريخ إصداراتها، بالإضافة إلى الجملة الجافاسكربتية لتطبيق هذه الخاصية.

القيمة الافتراضية:	1
تنطبق على:	يمكن تطبيق هذه الخاصية على أي عنصر، ولكن عندما يكون قيمة الخاصية border-collapse لجدول (مثل tr,th,td) هي collapse، لا تكون الخاصية border-image-width صالحة. إنها تنطبق أيضًا على::first-letter。
الوراثة:	لا يوجد
يمكن تحويله إلى حركة:	لايرجى الرجوع إلى خصائص الرسوم المتحركة。
الإصدار:	ميزات CSS3 الجديدة
جملة JavaScript:	عنصر.style.borderImageWidth="30 30"

استخدام جملة border-image-width

جملة هذا الخصائص كالتالي:

border-image-width:　[　length　|　percentage　|　number　|　auto　]　1　to　4　قيم |　initial　|　inherit

في المثال التالي، يتم عرض كيفية استخدام خاصية border-image-width.

مثال

.box　{
　　　　width:　300px;
　　　　height:　150px;
　　　　border-image-source:　url("border.png");
　　　　border-image-width:　10px;
　　　　border-image-slice:　30;
　　　　border-image-repeat:　round;
}

اختبار لمعرفة‹/›

قيمة الخاصية

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

القيمة	وصف
length	تحديد عرض الحافة بشكل مطلق أو نسبي.
percentage	تحديد عرض الحافة، مرفوعًا عن طريق نسبة العنصر.
number	يوضح العنصرborder-widthقيمة الحساب أو مضاعف عرض الحافة.
auto	تحديد عرض صورة الحافة هو عرض أو طول الشريحة الخاص بالصورة.
initial	ضع هذا الخصائص على قيمته الافتراضية.
inherit	إذا تم تحديدها، فإن العنصر المرتبط يستخدم قيمة حساب خاصية border-image-width للعنصر الأب.

متاحية المتصفحات

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

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

قراءة المزيد

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

خصائص مرتبطة:border-image،border-image-source،border-image-repeat،border-image-slice،border-image-outset،border。

خصائص اليسار للجدار خصائص source للجدار