css - CSS 边框图像 - 关键

Question

我用 CSS 做到了这一点：

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

语法是：

border-image: source slice width outset repeat;

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

• 我不明白：边框图像的尺寸（宽度-高度）的语法如何动态？

Answer 1

border-image 属性是 CSS3 中引入的属性之一，目的是使图像能够在 CSS 边框上使用。

CSS 边框图像属性是一种简写属性，用于在一个位置设置多个“边框图像”相关属性。换句话说，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/

希望这可以帮助...