خاصية CSS border-image-slice
مثال
حدد كيفية تقطيع صورة الحد إلى شرائح:
#borderimg {
border-image-slice: 30%;
}
التعريف والاستخدام
border-image-sliceتحدد الخاصية كيفية تقطيع الصورة المحددة بواسطة
border -image-source . يتم دائمًا تقطيع الصورة إلى تسعة أقسام: أربع زوايا وأربعة حواف وفي المنتصف.
يتم التعامل مع الجزء "الأوسط" على أنه شفاف تمامًا ، ما لم يتم تعيين الكلمة الأساسية للتعبئة.
نصيحة: انظر أيضًا إلى خاصية border-image (خاصية اختصار لتعيين جميع خصائص border-image- *).
| القيمة الافتراضية: | 100٪ |
|---|---|
| وارث: | رقم |
| متحرك: | رقم. اقرأ عن animatable |
| الإصدار: | CSS3 |
| بناء جملة JavaScript: | الكائن .style.borderImageSlice = "30٪" |
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
| Property | |||||
|---|---|---|---|---|---|
| border-image-slice | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
بنية CSS
border-image-slice: number|%|fill|initial|inherit;
ملاحظة: يمكن border-image-sliceللخاصية أن تأخذ من قيمة واحدة إلى أربع قيم. إذا تم حذف القيمة الرابعة ، فستكون هي نفسها القيمة الثانية. إذا تم حذف الثالث أيضًا ، فسيكون هو نفسه الأول. إذا تم حذف الثاني أيضًا ، فسيكون هو نفسه الأول.
قيم الملكية
| Value | Description | Play it |
|---|---|---|
| number | The number(s) represent pixels for raster images or coordinates for vector images | |
| % | Percentages are relative to the height or width of the image | |
| fill | Causes the middle part of the image to be displayed | |
| 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: خاصية borderImageSlice