頂部和底部的邊框圖像與flex消失

Question

我有兩個div的漸變邊框圖像，我使用了flex屬性。
問題是這樣的：邊框從頂部和底部消失在鉻，但在Firefox中工作正常。我有以下代碼和代碼。這個dabblet也可以在firefox中運行，但不是在chrome中。
另外我知道代碼有點混亂，但我會專注於稍後清理它。

http://dabblet.com/gist/9642c185857b20cd6720

HTML：

<div class="row"> 
    <div class="item1"> 
     <h3>Item</h3> 
     <table class="table"> 
      <tr> 
       <td> 
        Item 
       </td> 
       <td> 
        <button id="buybottlecollector" type="button" class="btn btn-primary">Stuff</button> 
       </td> 
      </tr> 

     </table> 
    </div> 
    <div class="item2"> 
     <h3>Item2</h3> 
     <p>Item2</p> 
    </div> 
    </div> 
</div> 

和CSS：

.row{ 
    display: -webkit-flex; 
    display: flex; 
} 

.item1{ 
    flex: 0 1 40%; 
    margin: 5% ; /* 5% */ 
    padding: 15px; 
    border-width: 3px; 
    border-style: solid; 
    border-image: linear-gradient (to bottom, grey, #f5f5f5) 1 100%; 
    -moz-border-image: -moz-linear-gradient(grey, #f5f5f5) 1 100%; 
    -webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(grey), to(#f5f5f5)) 1 100%; 
    -webkit-border-image: -webkit-linear-gradient(grey, #f5f5f5) 1 100%; 
    -o-border-image: -o-linear-gradient(grey, #f5f5f5) 1 100%; 
} 


.item2{ 
    flex: 0 1 40%; 
    margin: 5%; 
    padding: 15px; 
    border-width: 3px; 
    border-style: solid; 
    border-image: linear-gradient (to bottom, grey, #f5f5f5) 1 100%; 
    -moz-border-image: -moz-linear-gradient(grey, #f5f5f5) 1 100%; 
    -webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(grey), to(#f5f5f5)) 1 100%; 
    -webkit-border-image: -webkit-linear-gradient(grey, #f5f5f5) 1 100%; 
    -o-border-image: -o-linear-gradient(grey, #f5f5f5) 1 100%; 
} 

Answer 1

通過反覆試驗，以下dabblet作品：http://dabblet.com/gist/489b8f81b188a88d4bf4

我注意到，你寫-prefix-在沒有前綴的版本之後進行編輯聲明，所以我刪除了它們uhoh後者沒有，而它應該在Chrome V20工作+

您需要：

• 到梯度和左括號之間移除空白linear-gradient(
• 更換邊界圖像重複值你通過stretch使用（100％）（好像只有關鍵字是有效的，而不是百分比）在Chrome

border-image: linear-gradient(to bottom, grey, yellow) 1 stretch;作品（然後是AUTOP的問題refixer或http://pleeease.io/play/添加所需的前綴，如果有的話）

資源：

• border-image從W3C CSS背景和邊框模塊級別3
• border-image-repeat在WebPlatform中
• caniuse