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

border-image-repeat Property

ویژگی border-image-repeat در CSS مشخص می کند که تصویر حاشیه (border-image) تکرار، گرد (تعداد متناسب برای فیت شدن) و یا کشیده شود.

نحوه نوشتار

border-image-repeat: stretch;
border-image-repeat: repeat;
border-image-repeat: round;
border-image-repeat: space;
border-image-repeat: round stretch;

مقادیر

stretch​

تصویر کشیده میشود تا فضا را پر کند. این مقدار پیشفرض.

repeat​​

تصویر تا آنجا تکرار می شود که فضا را پر کند.

round​

تصویر تا آنجا که فضا را پر کند تکرار می شود، در صورتی که فضای خالی ماند اندازه اش تغییر می کند تا فضا پر شود.

space​

تصویر تکرار می شود تا فضا را پر کند. در صورتی که فضای خالی ماند، این فضا بین تصاویر پخش می شود.

ویژگی border-image-property می تواند یک تا چهار متغییر بپذیرد

• اگر یک مقدار مشخص شود، برای هر چهار طرف مشخص می شود.
• اگر دو مقدار مشخص شود، اولی برای حاشیه های بالا و پایین و دومی برای حاشیه های چپ و راست اعمال خواهند شد.

html

<div class="bordered1">stretch</div>
<div class="bordered2">repeat</div>
<div class="bordered3">round</div>
<div class="bordered4">space</div>
<div class="bordered5">stretch repeat</div>
<div class="bordered6">space round</div>

css

body {
    text-align: center;
}
div {
    width: 12rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 40px solid;
    border-image: url(http://my-project.ir/img/border.png) 27;
    margin: 15px;
    background-color: #eeeeee;
    text-align: center;
    display: inline-block;
}
.bordered1 {
    border-image-repeat: stretch;
}
.bordered2 {
    border-image-repeat: repeat;
}
.bordered3 {
    border-image-repeat: round;
}
.bordered4 {
    border-image-repeat: space;
}
.bordered5 {
    border-image-repeat: stretch repeat;
}
.bordered6 {
    border-image-repeat: space round;
}

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

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