CSS border-image - 关键

Question

我用CSS做了这个：

但我希望我的客户更改图像框。在我的图像中，当前帧只是一种颜色（＃000）。但框架可以是装饰性的。所以客户应该使用装饰图像进行取景。我见过W3Schools' border-image property lesson。

语法为：

border-image: source slice width outset repeat;

但是使用如下图像我无法做到这一点。

• 我无法理解：边框图像的尺寸（宽度 - 高度）语法是如何动态的？

Answer 1

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/

最好的运气：）;

Answer 2

我找到了一个边框图像生成器，它显示了移动条形图时x和y值的变化情况。 这是链接：

http://border-image.com/

希望这会有所帮助......