تصویر حاشیه ای در CSS

با استفاده از ویژگی تصویر حاشیه ای در CSS ، می توانید از یک تصویر یا یک شیب به عنوان حاشیه یک عنصر استفاده کنید:

#imgborder {
    -webkit-border-image: url(bdg-border.png) 20% round; /* Safari from 3.1 to 5 */
    -o-border-image: url(bdg-border.png) 20% round; /* Opera from 11 to 12.1 */
    border-image: url(bdg-border.png) 20% round; /* Chrome from 49 */
}

image در واقع خلاصه ای برای پنج زیر خاصیت است:

• منبع-مرزی-تصویر
• حاشیه-تصویر-برش
• عرض تصویر حاشیه
• مرز-تصویر-شروع
• حاشیه-تصویر-تکرار

برای استفاده از مختصر ، باید مقادیر را به همان ترتیب لیست کنید:

حاشیه-تصویر: تکرار شروع عرض قطعه منبع ؛

تنها مقداری که باید برای نوشتن مختصر تصویر CSS حاشیه تعریف کنید تا مطابق با هدف کار کند منبع آن است. اگر مقدار دیگری را حذف کنید ، به سادگی روی مقدار پیش فرض آن تنظیم می شود.

هر یک از زیرمجموعه ها بهمراه مقادیر موجود در بخش های بعدی توضیح داده خواهد شد.

منبع تصویر حاشیه ای

ویژگی CSS border-image-source مسیر مورد نیاز برای دسترسی به تصویری را که می خواهید به عنوان حاشیه استفاده کنید مشخص می کند:

#imgborder {
    border-image-source: url(bdg-border.png);
}

نحو منبع مرزی-تصویر ساده است:

border-image-source: مقدار؛

مقدار پیش فرض این ویژگی هیچ است – این بدان معنی است که هیچ تصویری انتخاب نشده است ، بنابراین عنصر با یک حاشیه ساده احاطه می شود. برای انتخاب تصویر ، یک URL منبع ، شیب CSS یا حاشیه SVG تعریف کنید.

برش تصویر برای ایجاد حاشیه

از ویژگی تصویر حاشیه ای CSS برای تعیین نحوه برش تصویر برای استفاده از حاشیه استفاده می شود. ابتدا باید تصویر با استفاده از منبع-مرزی تصویر مشخص شود.

تصاویر به 9 قسمت تقسیم شده اند: چهار طرف ، چهار گوشه و وسط. وسط معمولاً نامرئی (شفاف) است و از گوشه ها و کناره ها به عنوان تصویر حاشیه در CSS استفاده می شود:

برای تعریف برش ، باید مقدار آن را برای پیکسل برای یک تصویر شطرنجی یا مختصات برای یک تصویر SVG مشخص کنید. همچنین می توانید برای تعیین برش در رابطه با اندازه تصویر از درصد استفاده کنید:

#imgborder {
    border-image-slice: 15%;
}

توجه: برای استفاده از وسط تصویر به عنوان تصویر پس زمینه عنصر ، می توانید از کلمه کلیدی fill استفاده کنید.

تعیین عرض تصویر حاشیه

با استفاده از ویژگی border-image-width می توانید عرض تصویر حاشیه ای سفارشی را در CSS تعریف کنید:

#imgborder {
    border-image-source: url(bdg-border.png);
    border-image-width: 12px;
}

نحو برای این ویژگی می تواند از یک تا چهار مقدار باشد که می تواند در درصد یا تعداد بدون واحد تعریف شود:

border-image-width: value1 value2 value3 value4؛

Explanation	Example	Syntax
عرض هر چهار طرف یکسان است	;border-image-width: 1	One value
اولین مقدار عرض را برای مرزهای بالا و پایین تعریف می کند. مقدار دوم عرض را برای مرزهای چپ و راست تعریف می کند.	;border-image-width: 1 2	Two values
اولین مقدار عرض را برای حاشیه بالا تعریف می کند. مقدار دوم عرض را برای مرزهای چپ و راست تعریف می کند. مقدار سوم عرض را برای حاشیه پایین تعریف می کند.	;border-image-width: 1 2 3	Three values
اولین مقدار عرض را برای حاشیه بالا تعریف می کند. مقدار دوم عرض را برای مرز راست تعریف می کند. مقدار سوم عرض را برای حاشیه پایین تعریف می کند. مقدار چهارم عرض را برای حاشیه سمت چپ تعریف می کند.	;border-image-width: 1 2 3 4	Four values

همچنین می توانید از کلیدواژه خودکار استفاده کنید که عرض را به عرض عرض تصویر حاشیه یا عرض عرض تنظیم می کند.

توجه: مقدار پیش فرض برای ویژگی CSS border-image-slice 1 است.

تنظیم شروع تصویر حاشیه در CSS

ویژگی CSS حاشیه تصویر-شروع تعریف می کند که چه مقدار از لبه خارج از لبه خارجی عنصر خارج می شود:

#imgborder {
    border-image-source: url(bdg-border.png);
    border-image-outset: 20px;
}

نحو نسبتاً شهودی است:

حاشیه-تصویر-شروع: مقدار؛

درست مانند برش تصویر حاشیه CSS ، شروع تصویر حاشیه CSS می تواند تا چهار مقدار طول بکشد:

Explanation	Example	Syntax
شروع کار برای هر چهار طرف یکسان است.	border-image-outset: 1;	One value
اولین مقدار شروع را برای مرزهای بالا و پایین تعریف می کند. مقدار دوم ابتدا را برای مرزهای چپ و راست تعریف می کند.	border-image-outset: 1 2;	Two values
اولین مقدار ابتدا را برای حاشیه بالا تعریف می کند. مقدار دوم ابتدا را برای مرزهای چپ و راست تعریف می کند. مقدار سوم ابتدا را برای مرز پایین تعریف می کند.	border-image-outset: 1 2 3;	Three values
اولین مقدار ابتدا را برای حاشیه بالا تعریف می کند. مقدار دوم ابتدا را برای مرز راست تعریف می کند. مقدار سوم ابتدا را برای مرز پایین تعریف می کند. مقدار چهارم ابتدا را برای مرز چپ تعریف می کند.	border-image-outset: 1 2 3 4;	Four values

توجه: مقدار پیش فرض برای ویژگی CSS حاشیه تصویر-شروع 0 است ، این بدان معنی است که مرز در لبه های خارجی عنصر باقی می ماند.

آیا تصویر حاشیه تکرار می شود؟

با استفاده از ویژگی CSS border-image-تکرار ، می توانید نحوه استفاده از تصویر حاشیه برای پر کردن منطقه حاشیه را مشخص کنید:

#imgborder {
    border-image-source: url(bdg-border.png);
    border-image-repeat: round;
}

برای این ویژگی می توانید یک یا دو مقدار تعیین کنید:

border-image-تکرار: مقدار 1 مقدار 2؛

اگر یک مقدار تعریف کنید ، بر همه مرزها به طور یکسان تأثیر می گذارد. اگر دو مقدار تعریف کنید ، اولین مقدار برای اصلاح مرزهای افقی و دیگری برای اصلاح مرزهای عمودی استفاده می شود.

در جدول زیر ، تمام خصوصیات موجود برای CSS حاشیه-تصویر-تکرار را مشاهده می کنید:

Description	Value
مقدار پیش فرض تصویر کشیده شده است بنابراین کل منطقه را پر می کند.	stretch
تصویر برای پر کردن کل منطقه تکرار می شود.	repeat
تصویر برای پر کردن کل منطقه تکرار می شود. اگر ناحیه را با تعداد کامل کاشی پر نکند ، تصویر مناسب تر می شود تا متناسب شود.	round
تصویر برای پر کردن کل منطقه تکرار می شود. اگر منطقه را با تعداد کامل کاشی پر نکند ، فضای اضافی در اطراف آنها توزیع می شود.	space

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

این تگ در مرورگرهای IE ، safari ، firefox، cherom، opera وEdge پشتیبانی می شود.

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.