مثال
تحديد كيفية تكرار الصورة الحدود:
#borderimg
{
border-image-source: url(border.png);
border-image-repeat: repeat;
}
انها محاولة لنفسك » تعريف واستخدام
تحدد الخاصية الحدود صورة تكرار ما إذا كانت الصورة الحدود ينبغي أن يتكرر، تقريب أو تمدد.
نصيحة: ابحث أيضا في الحدود بين صورة الملكية (a shorthand property for setting all the border-image-* properties) .
| القيمة الافتراضية: | stretch |
|---|---|
| وارث: | no |
| Animatable: | no. Read about animatable |
| الإصدار: | CSS3 |
| جافا سكريبت بناء الجملة: | object .style.borderImageRepeat="round" Try it |
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل العقار.
| خاصية | |||||
|---|---|---|---|---|---|
| border-image-repeat | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
CSS بناء الجملة
border-image-repeat: stretch|repeat|round|initial|inherit;Note: تحدد هذه الخاصية كيفية تحجيم الصور لالجانبين، والجزء الأوسط من الصورة الحدود ومزينة بالبلاط. لذلك، يمكنك تحديد قيمتين هنا. إذا تم حذف القيمة الثانية، فمن المفترض أن يكون هو نفسه أول.
قيم الملكية
| القيمة | وصف | العبها |
|---|---|---|
| stretch | القيمة الافتراضية. ويمتد الصورة لملء المنطقة | العبها " |
| repeat | ومزينة بالبلاط الصورة (repeated) لملء المنطقة | العبها " |
| round | الصورة غير المغطى (repeated) لملء المنطقة. اذا لم ملء المنطقة مع عدد صحيح من البلاط، وترتيبها الصورة حتى تناسبها | العبها " |
| space | الصورة غير المغطى (repeated) لملء المنطقة. اذا لم ملء المساحة مع عدد كامل من البلاط، ويتم توزيع مساحة إضافية حول البلاط | |
| initial | تحدد هذه الخاصية إلى قيمته الافتراضية. قرأت عن الأولي | العبها " |
| inherit | يرث هذه الخاصية من عنصر الأم. قراءة حول وراثة |
صفحات ذات صلة
CSS3 البرنامج التعليمي: صور CSS3 الحدود
CSS المرجعي: border-image property
CSS المرجعي: border-image-outset property
CSS المرجعي: border-image-slice property
CSS المرجعي: border-image-source property
CSS المرجعي: border-image-width property
HTML DOM المرجع borderImageRepeat property