تصاویر کادر در CSS (Border Images)
در «تصاویر کادر (Border Images)» با ویژگی میان بُر border-image می توانید یک تصویر را به عنوان کادر عنصر استفاده کنید؛ در نتیجه گوشه ها از تصویر گرفته می شوند و میانه با تکرار یا کشش پر می شود.
آشنایی با ویژگی border-image
این ویژگی تصویر را به 9 قسمت می بُرد و گوشه ها را در گوشه عنصر قرار می دهد. سپس بخش های کناری و میانی طبق مقدار border-image-repeat کشیده یا تکرار می شوند. نکته: برای عملکرد، وجود border الزامی است.
نوشتار میان بُر ویژگی تصاویر کادر
#box { border: 10px solid transparent; /* لازم برای border-image */ padding: 15px; border-image: url(border.png) 30 round; }در مثال بالا، عدد 30 فاصله برش از هر لبه است و مقدار round باعث تکرار و مقیاس دهی بخش میانی برای پر کردن فضا می شود.
کشش در برابر تکرار
به جای round می توانید از stretch استفاده کنید تا بخش میانی تصویر کشیده شود:
#box-stretch { border: 10px solid transparent; padding: 15px; border-image: url(border.png) 30 stretch; }تفاوت مقادیر slice
تغییر مقدار border-image-slice ظاهر نهایی را کاملاً عوض می کند:
#b1 { border: 10px solid transparent; padding: 15px; border-image: url(border.png) 50 round; }
#b2 { border: 10px solid transparent; padding: 15px; border-image: url(border.png) 20% round; }
#b3 { border: 10px solid transparent; padding: 15px; border-image: url(border.png) 30% round; }جزئیات ویژگی های تصاویر کادر
border-image-source: مسیر تصویر.border-image-slice: نحوه برش.border-image-width: پهنای تصویر کادر.border-image-outset: بیرون زدگی نسبت به جعبه مرز.border-image-repeat: حالتstretch،repeatیاround.
نکته: هنگام استفاده از تصاویر کادر، با padding فاصله متن از کادر را کنترل کنید تا محتوای داخلی به لبه ها نچسبد.
هشدار: تصاویر بزرگ یا با الگوی ظریف می توانند در نمایش های مختلف دچار اعوجاج شوند؛ بنابراین ابتدا با مقادیر slice و repeat آزمایش کنید.
منابع و ادامه مطالعه درباره تصاویر کادر
برای مبانی ظاهری مرتبط، صفحه گوشه های گرد و همچنین چیدمان در چیدمان وب سایت را ببینید. راهنمای مرجع: border-image در MDN و border-image-slice در MDN. برای دسترسی سریع، لینک تصاویر کادر را ذخیره کنید.