خاصية تكرار صورة الحدود في CSS
مثال
حدد كيفية تكرار صورة الحدود:
#borderimg
{
border-image-source: url(border.png);
border-image-repeat: repeat;
}
التعريف والاستخدام
تحدد الخاصية ما border-image-repeat
إذا كان يجب تكرار صورة الحدود أو تقريبها أو تباعدها أو تمديدها.
نصيحة: انظر أيضًا إلى خاصية border-image (خاصية اختصار لتعيين جميع خصائص border-image- *).
القيمة الافتراضية: | تمتد |
---|---|
وارث: | رقم |
متحرك: | رقم. اقرأ عن animatable |
الإصدار: | CSS3 |
بناء جملة JavaScript: | الكائن .style.borderImageRepeat = "round" |
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
Property | |||||
---|---|---|---|---|---|
border-image-repeat | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
بنية CSS
border-image-repeat: stretch|repeat|round|space|initial|inherit;
ملاحظة: تحدد هذه الخاصية كيف يتم تحجيم الصور الخاصة بالجوانب والجزء الأوسط من صورة الحد وتقسيمها. لذلك ، يمكنك تحديد قيمتين هنا. إذا تم حذف القيمة الثانية ، فمن المفترض أن تكون هي نفس القيمة الأولى.
قيم الملكية
Value | Description | Play it |
---|---|---|
stretch | Default value. The image is stretched to fill the area | |
repeat | The image is tiled (repeated) to fill the area | |
round | The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the image is rescaled so it fits | |
space | The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
الصفحات ذات الصلة
دروس CSS: CSS Border Images
مرجع CSS: خاصية صورة الحدود
مرجع CSS: خاصية border-image-outset
مرجع CSS: خاصية شريحة صورة الحدود
مرجع CSS: خاصية مصدر صورة الحدود
مرجع CSS: خاصية عرض صورة الحدود
مرجع DOM HTML: خاصية borderImageRepeat