CSS3 border-image Property

مثال

تحديد صورة كما الحدود حول عنصر:

#borderimg {
    -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
    border-image: url(border.png) 30 round;
}

انها محاولة لنفسك »

أكثر "Try it Yourself" الأمثلة أدناه.

تعريف واستخدام

الخاصية الحدود صورة يسمح لك تحديد صورة لاستخدامها بدلا من الحدود العادي حول عنصر.

الخاصية الحدود بين الصورة هي الخاصية المختصرة لتحديد الحدود بين الصورة المصدر ، الحدود بين صورة شريحة ، الحدود بين صورة العرض ، الحدود بين صورة البداية و الحدود صورة تكرار خصائص.

يتم تعيين القيم حذف إلى قيمها الافتراضية.

القيمة الافتراضية:	none 100% 1 0 stretch
وارث:	no
Animatable:	no. Read about animatable
الإصدار:	CSS3
جافا سكريبت بناء الجملة:	object .style.borderImage="url(border.png) 30 round" Try it

دعم المتصفح

الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل العقار.

أرقام تليها -webkit-، -moz-، أو -o- تحدد النسخة الأولى التي عملت مع بادئة.

خاصية
border-image	16.0 4.0 -webkit-	11.0	15.0 3.5 -moz-	6.0 3.1 -webkit-	15.0 11.0 -o-

ملاحظة: انظر دعم المتصفح الفردية لكل قيمة أقل.

CSS بناء الجملة

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

قيم الملكية

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

مزيد من الأمثلة

مثال

القيم شريحة مختلفة تماما يتغير مظهر الحدود:

#borderimg1 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 50 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 50 round; /* Opera 11-12.1 */
    border-image: url(border.png) 50 round;
}

#borderimg2 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */
    border-image: url(border.png) 20% round;
}

#borderimg3 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 30% round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30% round; /* Opera 11-12.1 */
    border-image: url(border.png) 30% round;
}

انها محاولة لنفسك »