ویژگی border-image-source در CSS

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;
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند.