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/

祝你好运:);