2013-04-04 84 views
2

我这样做与CSS: enter image description hereCSS边框图像 - 关键

但我想我的客户改变图像帧。在我的图像中,当前帧只是一种颜色(#000)。但框架可以是装饰性的。所以客户应该使用装饰图像进行取景。我见过W3Schools' border-image property lesson

的语法是:

border-image: source slice width outset repeat; 

但是,使用像我更不知道如何做到这一点的下面的图像。

enter image description here

  • 我不明白:语法是如何为动态的边界图像的尺寸(宽高)?

回答

2

border-image属性是CSS3中引入的一个属性,用于在CSS边框上使用图像。

CSS border-image属性是一个简写属性,用于在一个位置设置多个“边框图像”相关属性。换句话说,border-image属性是将图像添加到边界的有效方法。

div{-webkit-border-image: url(/properties/border-image-1.png) 30 30 round;-moz-border-image: url(/properties/border-image-1.png) 30 30 round;-ms-border-image: url(/properties/border-image-1.png) 30 30 round;-o-border-image: url(/properties/border-image-1.png) 30 30 round;border-image: url(/properties/border-image-1.png) 30 30 round;} 

此链接可能对您有帮助。

http://css-tricks.com/understanding-border-image/

祝您好运:);

2

我发现了一个边框图像生成器,它显示了当您移动条时x和y值如何变化。 这里的链接:

http://border-image.com/

希望这有助于...