به ناحیه داخلی, که قرار است حاشیه تصویری درون آن ترسیم شود, ناحیه حاشیه تصویری (border image area) گفته می شود. بصورت پیشفرض مرزهای این ناحیه بر روی مرزهای عنصر (border box) قرار می گیرند مگر اینکه بوسیله ویژگی border-image-outset ناحیه حاشیه تصویری, گسترش پیدا کند.
در تصویر زیر خط خاکستری نشان دهنده ناحیه حاشیه اصلی عنصر است که توسط ویژگی border تعیین می شود. همچنین خط نارنجی رنگ نشان دهنده ناحیه حاشیه تصویری می باشد که توسط ویژگی border-image-outset گسترش پیدا کرده است.
ویژگی border-image-outset می تواند چهار, سه, دو و یا یک مقدار داشته باشد.
border-image-outset: 15px 20px 50px 20px; /* top right bottom left */
border-image-outset: 15px 50px 20px; /* top=10px right=left=50px bottom=20px */
border-image-outset: 15px 20px; /* top=bottom=15px right=left=20px */
border-image-outset: 15px; /* top=bottom=right=left=15px */
نکته مهم اینکه آن قسمت هایی از حاشیه تصویری که خارج از عنصر و محدوده border box آن قرار دارند, قابل کلیک و یا hover و غیره نخواهند بود و یا تاثیری بر روی اسکرول نخواهند داشت.
مقادیر این ویژگی می توانند مقادیری طولی مثل px و یا یک عدد بدون واحد باشند.
اگر از یک عدد بدون واحد ( مثلا X ) استفاده شود, به این معنی است که مقدار ویژگی border-image-outset برای حاشیه تصویری, X برابر border-width عنصر خواهد بود.
border: 3px solid red;
border-image-outset: 4; /* 4*3 = 12px */
موارد زیر صحیح هستند:
border-image-outset: 30px;
border-image-outset: 2 4;
border-image-outset: 10px 20px 30px;
border-image-outset: 4;
در دمویی که در ادامه خواهید دید از تصویر زیر استفاده شده است:
به صورت پیشفرض باید حاشیه تصویری روی قسمت سیاه رنگ ترسیم می شد. اما چون ویژگی border-image-outset برابر با 20 پیکسل قرار گرفته است در نتیجه ناحیه ترسیم حاشیه تصویری 20 پیکسل به سمت بیرون گسترش پیدا خواهد کرد. با تغییر مقادیر ویژگی های مختلف در دموی زیر به درک بهتر موضوع کمک کنید:
See the Pen border-image-outset by Mojtaba Seyedi (@seyedi) on CodePen.
سوال داری؟ برو به پنل پرسش و پاسخ