CSS保健室｜border-image-repeat

border-image-repeat

卡卡西說當忍者，最基本的分身術是一定要會的，這次光分身就會學 repeat 、 round 、 space 三個，然後緊接著還要跟丁次討教 stretch 倍化之術，你再這樣慢吞吞的會遲到啊，我們趕快整理一下要出門了！

cover

border-image-repeat 屬性規定圖像邊框是否應該被重複（ repeat ）、拉伸（ stretch ）或鋪滿（ round 、 space ）。該屬性規定如何延展和鋪排邊框圖像的邊緣和中間部分，因此，可以規定兩個值，如果省略第二個值，則採取與第一個相同的值。

border-image-repeat

div {
    border: 27px solid rgba(242,181,78,.3);
    border-image-source: url(img/img.png);
    border-image-slice: 34;
    border-image-repeat: 
        stretch | repeat | round | space;
}

屬性	說明	範例
stretch	將小圖片拉長來填滿邊框區域，圖片不循環，很顯然這樣邊框圖會變形。
repeat	邊框圖將會依次平鋪，填滿邊框區域，但有個瑕疵，就是當元素寬度或高度不是邊框圖的整數倍時，最後一個 / 第一個圖片不能完成顯示，會被遮擋一部分。
round	重複方式填滿，當無法以整數的倍數填滿時，就會依照整數倍數來縮放圖片並填滿。
space	重複填滿，用整數倍數填滿，其它不足的部分，再縮放圖片填滿。