border-image Property
ویژگی border-image
در CSS تصویری را در حاشیه و دور عنصر مورد نظر ترسیم می کند. این تصویر جایگزین حایشه (border) میشود.
این ویژگی کوتاه نویسی است برای ویژگیهای:
نکته: بهتر اس در نظر به همراه این ویژگی، از ویژگی border-style
را نیز استفاده شود، تا درصورتی که به هر دلیل تصویر مورد نظر بارگذاری نشد، مرورگر حاشیه (border) را جایگزین آن کند.
نحوه نوشتار
border-image: linear-gradient(red, blue) 15; border-image: url("/images/border.png") 30 space; border-image: linear-gradient(red, blue) 15 / 30px; border-image: url("/images/border.png") 15 30 / 10px 45px / 3% round space;
ویژگی border-image
میتواند یکی یا تمام مقادیر زیر را بپذیرد.
نکته: اگر مقدار border-image-source
برابر با none
باشد، یا تصویر به هر دلیل بارگذاری نشود، border-style
به جای آن نمایش داده خواهد شد.
مقادیر
منبع تصویر حاشیه
آدرس تصویری که برای border استفاده می شود را مشخص می کند.
برش تصویر حاشیه
ابعاد و چگونگی برش تصویر را مشخص میکند.
عرض تصویر حاشیه
عرض تصویر border را مشخص می کند.
فاصله تصویر از border
فاصله تصویر border را از لبه بیرونی عنصر مشخص می کند.
تکرار تصویر border
مشخص می کند که تصویر border باید تکرار ، گرد و یا کشیده شود.
در مثال های زیر نحوه عملکرد این ویژگی را میبینیم:
html
<div class="border-image"></div>
css
.border-image { border-image: url(http://my-project.ir/img/border-image.png) 27 41 41 27 / 2; height: 50px; margin: 15px; border-width: 10px; border-style: solid; }
مشاهده و ویرایش کد در حالت تمام صفحه
در مثال دیگری نحوه ایجاد گرادینت را توسط این ویژگی میبینیم:
html
<div id="gradient">این عنصر توسط گرادینتی که بوسیله border-image ایجاد شده است.</div>
css
#gradient { width: 200px; border: 30px solid; border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px) 60; padding: 20px; direction: rtl; }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند.