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

تصاویر حاشیه در CSS به شما این امکان را می‌دهند که از یک تصویر به عنوان حاشیه عناصر HTML استفاده کنید. این ویژگی روش‌های خلاقانه و قابل تنظیمی برای طراحی حاشیه‌ها ارائه می‌دهد که فراتر از خطوط ساده، نقطه‌چین یا خط‌چین سنتی است.

سینتکس:

ویژگی shorthand یا مختصر border-image شامل این ویژگی‌ها است:

border-image-source

border-image-slice

border-image-width

border-image-outset

border-image-repeat

مثال:

div {

border: 10px solid transparent;

border-image-source: url(‘border-image.png’);

border-image-slice: 30;

border-image-repeat: round;

}

توضیحات:

border-image-source: منبع تصویر حاشیه را مشخص می‌کند.
- مثال: border-image-source: url('path-to-image.png');
border-image-slice: تعیین می‌کند که تصویر به چند قسمت (گوشه‌ها، لبه‌ها و مرکز) تقسیم شود.
- مقادیر به صورت پیکسل، درصد یا fill (برای حفظ مرکز) است.
- مثال: border-image-slice: 20;
border-image-width: عرض تصویر حاشیه را تعریف می‌کند.
- مثال: border-image-width: 10px;
border-image-outset: مشخص می‌کند که تصویر حاشیه تا چه حد از جعبه مرزی عنصر (border box) بیرون برود.
- مثال: border-image-outset: 5px;
border-image-repeat: تعیین می‌کند که تصویر حاشیه چگونه تکرار، کشیده یا گرد شود.
- مقادیر ممکن: stretch، repeat، round، space.
- مثال: border-image-repeat: round;

مثال کامل:

<!DOCTYPE html>

<head>

<title>تصویر حاشیه در CSS</title>

<style>

.border-image-example {

width: 300px;

height: 200px;

border: 15px solid transparent;

border-image-source: url(‘example-border.png’);

border-image-slice: 20;

border-image-width: 15px;

border-image-repeat: round;

}

</style>

</head>

<body>

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

</div>

</body>

</html>

نکات:

پشتیبان جایگزین: همیشه یک ویژگی حاشیه‌ی معمولی برای مرورگرهایی که از border-image پشتیبانی نمی‌کنند، تعریف کنید.
سازگاری مرورگر: بیشتر مرورگرهای مدرن از border-image پشتیبانی می‌کنند، اما اگر بخواهید از نسخه‌های قدیمی‌تر پشتیبانی کنید، حتماً بررسی کنید.

آیا نیاز به کمک برای طراحی خاصی دارید؟