css - 边框图像语法产生倾斜的图像

Question

我不理解border-image CSS 函数的语法。

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

#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;
}