خصائص صور الحدود CSS

التعريف والاستخدام

خاصية border-image هي خاصية مختصرة تُستخدم لضبط الخصائص التالية:

إذا تم تمرير القيمة، سيتم تعيين القيمة الافتراضية.

نصيحة:استخدم خاصية border-image-* لإنشاء أزرار قابلة للتمدد جميلة!

انظر أيضًا:

دليل CSS3:حواف CSS3

مثال

تعيين الصورة لتكون حاشية للعنصر div:

div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

جرب بنفسك

هناك أمثلة أكثر في قاعدة الصفحة.

نص CSS

border-image: source slice width outset repeat|initial|inherit;

قيمة الخاصية

القيمة الوصف الاختبار
border-image-source المسار إلى الصورة المستخدمة في الحاشية.
border-image-slice التمدد الداخلي لحاشية الصورة.
border-image-width عرض حاشية الصورة.
border-image-outset كمية الحاشية التي تتجاوز الحاشية.
border-image-repeat هل يجب تكرار (repeated) أو تغطية (rounded) أو تمدد (stretched) حاشية الصورة؟ الاختبار

تفاصيل التقنية

القيمة الافتراضية: لا 100% 1 0 ممدد
الوراثة: لا
الإصدار: CSS3
جافا سكربت: object.style.borderImage="url(border.png) 30 30 round"

مزيد من الأمثلة

زر Border-image
هذا المثال يظهر كيفية إنشاء زر باستخدام خاصية border-image.

دعم المتصفح

الرقم في الجدول يوضح إصدار المتصفح الذي يدعم هذه الخاصية بشكل كامل.

Chrome IE / Edge Firefox Safari Opera
16.0
4.0 -webkit-		 11.0 15.0
3.5 -moz-		 6.0
3.1 -webkit-		 15.0
11.0 -o-