CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

خصائص خروج صورة الحدود لـ CSS3 خصائص لون الحدود لـ CSS

CSS3 border-image 属性使用方法及示例

border-image CSS属性如何使用图像代替边框样式。这是一个简写属性，用于同时设置border-image-source,border-image-slice,border-image-width,border-image-outsetوborder-image-repeat属性

下表为此属性的用法说明和版本历史记录，以及该属性在javascript脚本中的使用语法。

默认值：	none 100 stretch; 查看全部属性
适用于：	该属性能被应用于任何元素，但当表格元素（如 tr,th,td ）的border-collapse属性值为collapse时border-image属性无效。它也适用于::first-letter.
继承：	没有
可动画制作：	否。请参见动画属性.
版本：	CSS3的新功能
JavaScript语法：	object.style.borderImage="url(border.png) 30 30 round"

border-image的使用语法

属性的语法如下：

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

يوضح المثال التالي كيفية استخدام خاصية border-image.

مثال

.box　{
　　　　width:　300px;
　　　　height:　150px;
　　　　border:　15px　solid　transparent;
　　　　-webkit-border-image:　url("border.png")　30　30　round;　/*　Safari　3.1-5　*/
　　　　-o-border-image:　url("border.png")　30　30　round;　/*　Opera　11-12.1　*/
　　　　border-image:　url("border.png")　30　30　round;
}

الاختبار لمعرفة‹/›

قيمة الخاصية

جدول يلي يصف قيمة هذه الخاصية.

القيمة	وصف
border-image-source	تحديد موقع الصورة التي سيتم استخدامها للحدود.
border-image-slice	تحديد الزيادة الداخلية من الزاوية العلوية، اليمنى، السفلية واليسرى من صورة الحدود.
border-image-width	تحديد عرض الحدود.
border-image-outset	تحديد كمية الارتفاع التي تتجاوز منطقة صورة الحدود.
border-image-repeat	تحديد كيفية تقليل أو تكرار جزء من وسط صورة الحدود، لتناسب حجم الحدود.
initial	أعد هذا الخصائص إلى قيمته الافتراضية.
inherit	إذا تم تحديد، فإن العنصر المرتبط يستخدم قيمة الخاصية border-image الخاصة بالعنصر الأب.

توافق المتصفح

توافق متصفحات border-image الخاص بخصائص، الأرقام في الجدول التالي تعبر عن إصدار أحدث متصفح يدعم هذه الخاصية؛ جميع المتصفحات الشائعة يدعمون هذه الخاصية.

	Firefox 3.5+ ^-moz-,15 + Google Chrome 4+ ^-webkit-,16 + Internet Explorer 11+ Apple Safari 3.1+ ^-webkit-,6+ Opera 11+ ^-o-,15+ ^-webkit-

قراءة إضافية

يرجى الرجوع إلى التعليمات التالية:CSS3 BorderوCSS Border.

خصائص خروج صورة الحدود لـ CSS3 خصائص لون الحدود لـ CSS