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

图像本身是一个简单的凯尔特结，我想在页面底部的一行中复制，意思是“圆形”。或者重复＆＃39;横跨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;
}

边框图像语法产生倾斜图像

1 个答案: