ویژگی border-image CSS

تعریف و استفاده

ویژگی border-image یک ویژگی کوتاه است که برای تنظیم موارد زیر استفاده می‌شود:

اگر مقدار مشخص نشود، مقدار پیش‌فرض تنظیم می‌شود.

توضیح:لطفاً از ویژگی border-image-* برای ساخت دکمه‌های قابل انعطاف زیبا استفاده کنید!

لطفاً به: مراجعه کنید

آموزش CSS3:کناره‌های CSS3

مثال

تصویر را به عنوان لبه‌ای که div عناصر را احاطه می‌کند، تعریف کنید:

div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

آزمایش کنید

مثال‌های بیشتری در پایین صفحه وجود دارد.

قوانین 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 آیا باید لبه تصویر تکرار شود(repeated)، به دور تا شود(rounded) یا کشیده شود(stretched)؟ آزمایش

جزئیات فنی

مقدار پیش‌فرض: none 100% 1 0 stretch
ارث: no
نسخه: CSS3
قوانین جاوااسکریپت: object.style.borderImage="url(border.png) 30 30 round"

مثال‌های بیشتر

دکمه Border-image
این مثال نحوه ایجاد یک دکمه از طریق ویژگی border-image را نشان می‌دهد.

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهایی است که این ویژگی را کامل پشتیبانی می‌کنند.

Chrome IE / Edge Firefox Safari Opera
16.0
4.0 -webkit-		 11.0 15.0
3.5 -moz-		 6.0
3.1 -webkit-		 15.0
11.0 -o-