border-image-source Property
ویژگی border-image-source
در CSS منبع تصویری را که توسط آن تصویر حاشیه عنصر (border-image
) مشخص می شود را تعیین می کند.
نحوه نوشتار
/* مقدار کلیدواژه */ border-image-source: none; /* مقدار (تصویر) */ border-image-source: url(image.jpg); border-image-source: linear-gradient(to top, red, yellow); /* مقادیر سراسری */ border-image-source: inherit; border-image-source: initial; border-image-source: unset;
مقادیر
none
هیچ تصویری برای حاشیه استفاده نمی شود. ویژگی border-style
بجای آن نمایش داده می شود.
تصویر
آدرس تصویر برای استفاده در حاشیه را مشخص می کند.
در مثال زیر نحوه عملکرد این ویژگی را میبینیم. مقادیر border
در این مثالها ( border: 15px dashed #777777
) است که در صورت نبود مقدار برای ویژگی border-image-source
، مرورگر مقدار border را جایگزین کرده و نمایش می دهد. (عنصر سوم)
html
<div class="border-image1">این یک متن نمونه است.</div> <div class="border-image2">این یک متن نمونه است.</div> <div class="border-image3">این یک متن نمونه است.</div>
css
div { border: 15px dashed #777777; padding: 15px; border-image-slice: 30; margin-top: 20px; direction: rtl; font-family: "segoe ui"; } .border-image1 { border-image-source: url(http://my-project.ir/img/border.png); } .border-image2 { border-image-source: linear-gradient(45deg, tomato, dodgerblue); } .border-image3 { border-image-source: none; }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند.