边框图像语法生成倾斜的图像

Question

我不了解边框图像CSS函数的语法。

以下 CSS 用于在正确的位置和宽度生成边框，但图像本身严重倾斜。它没有被拉伸(如在 CSS 属性中(，但它是压缩的或其他一些我不清楚的模组。

#page-header{
border-style: solid;
border-width: 0px 0px 30px;
-moz-border-image: url(test.png) 0 0 30 0 round;
-webkit-border-image: url(test.png) 0 0 30 0 round;
-o-border-image: url(test.png) 0 0 3 0 round;
border-image: url(test.png) 0 0 30 0 fill round;
}

图像本身是一个简单的凯尔特结，我希望在页眉底部的一行中复制，这意味着在x轴上"圆形"或"重复"，但在y轴上没有转换或复制。

Answer 1

边框

图像的代码在浏览器前缀之间看起来不同。

请尝试以下操作：

#page-header{
    border-style: solid;
    border-width: 0px 0px 30px;
    -webkit-border-image: url(test.png) 0 0 30 0 round;
       -moz-border-image: url(test.png) 0 0 30 0 round;
         -o-border-image: url(test.png) 0 0 30 0 round;
            border-image: url(test.png) 0 0 30 0 round;
}