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; }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند.