Question

我有两个div的渐变边框图像，我使用了flex属性问题是这样的：边框在chrome中从顶部和底部消失，但在firefox中工作正常。我有下面的dabblet和代码。 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-ed声明，所以我删除了它们而 uhoh 后者在Chrome v20 +中应该没有工作

你需要：

删除渐变和左括号linear-gradient(
用stretch替换您使用的border-image-repeat值（100％）（似乎只有关键字有效，而不是百分比）

border-image: linear-gradient(to bottom, grey, yellow) 1 stretch;适用于Chrome（然后是Autoprefixer或http://pleeease.io/play/的问题，可添加所需的前缀，如果有的话）

资源：

W3C CSS背景和边框模块级别3的

border-image
border-image-repeat在Webplatform
caniuse

顶部和底部边框图像随flex一起消失

1 个答案: