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

时间:2017-03-17 04:53:39

标签: css css3 border-image

我不理解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轴上的转换或复制。

1 个答案:

答案 0 :(得分:0)

您的边框图片代码在浏览器前缀之间看起来不同。

尝试以下方法:

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