صور الحدود CSS
صور الحدود CSS
باستخدام خاصية CSS border-image
، يمكنك تعيين صورة لاستخدامها كحدود حول عنصر.
خاصية CSS border-image
تتيح لك خاصية CSS border-image
تحديد صورة لاستخدامها بدلاً من الحد العادي حول العنصر.
يتكون العقار من ثلاثة أجزاء:
- الصورة المراد استخدامها كحدود
- أين تقطع الصورة
- حدد ما إذا كان يجب تكرار الأقسام الوسطى أو شدها
سوف نستخدم الصورة التالية (تسمى "border.png"):
تأخذ الخاصية الصورة border-image
وتقسيمها إلى تسعة أقسام ، مثل لوحة tic-tac-toe. ثم يضع الزوايا في الزوايا ، وتتكرر الأقسام الوسطى أو تتمدد حسب ما تحدده.
ملاحظة: لكي border-image
يعمل ، يحتاج العنصر أيضًا إلى
border
مجموعة الخصائص!
هنا ، تتكرر الأقسام الوسطى من الصورة لإنشاء الحد:
صورة كحدود!
ها هو الكود:
مثال
#borderimg
{
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png)
30 round;
}
هنا ، يتم تمديد الأجزاء الوسطى من الصورة لإنشاء الحد:
صورة كحدود!
ها هو الكود:
مثال
#borderimg
{
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png)
30 stretch;
}
نصيحة: تُعد border-image
الخاصية في الواقع خاصية مختصرة لـ
border-image-source
، border-image-slice
و border-image-width
،
border-image-outset
والخصائص border-image-repeat
.
صورة حدود CSS - قيم شريحة مختلفة
تغير قيم الشرائح المختلفة مظهر الحد تمامًا:
مثال 1:
صورة الحدود: url (border.png) 50 جولة ؛
المثال 2:
صورة الحدود: url (border.png) 20٪ round؛
المثال 3:
صورة الحدود: url (border.png) 30٪ round؛
ها هو الكود:
مثال
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png)
50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png)
30% round;
}
خصائص صورة الحدود CSS
Property | Description |
---|---|
border-image | A shorthand property for setting all the border-image-* properties |
border-image-source | Specifies the path to the image to be used as a border |
border-image-slice | Specifies how to slice the border image |
border-image-width | Specifies the widths of the border image |
border-image-outset | Specifies the amount by which the border image area extends beyond the border box |
border-image-repeat | Specifies whether the border image should be repeated, rounded or stretched |