问题标签 [border-image]

我想使用 CSS 属性“border-image”：https ://developer.mozilla.org/de/docs/Web/CSS/border-image

但由于某种原因，它只填充了元素的四个角：

我的代码：

我错了什么？

我希望小图像可以垂直和水平重复。

这样灰色框就被图像图案包围了。

非常感谢任何帮助。

我正在尝试使用边框图像为我的边框设置渐变颜色。但是什么时候使用border-image: linear-gradient(-180deg, #2D6BD0 0%, #83B8FF 100%); 我的 DIV 的每个角落只有一个点……有人知道为什么这没有显示整个边框吗？

我遇到了 Safari 10 和 CSS 边框图像渐变的问题。它适用于所有其他浏览器，甚至在 Safari 9 中。它甚至出现在 Safari 10 的在线模拟器中。请看下面的图片：

（我猜那是 IE 11，不是 IE 10。谢谢指正！）

我以为这只是我的 CSS，所以我真的简化了它并做了一个小提琴。你可以在https://jsfiddle.net/tgbuxkee/看到它

它也在下面生成。

有谁知道为什么会发生这种情况？我知道 Safari 中的某些图像边框存在错误，但我认为这里不是这种情况（也许是这样）。

指导很有帮助。

谢谢你。

我正在尝试在 div 上使用顶部和底部边框，border-image但它在 Safari 中无法正确显示。

正如我想要 的那样，它在Chrome中：

它在Safari中：

html:

CSS：

任何帮助是极大的赞赏。

边框图像也停止出现在 OS 和 iOS 上的 Safari 中。我在 Mac 上使用 Safari 10，在 iPad 和 iPhone 上使用最新版本的 iOS。它确实在 Firefox 中显示它在所有浏览器上使用的显示方式。

网站网址是： http: //majesticpinescolorado.com/

}

我研究了我做错了什么，但所有声明似乎都是正确的。任何帮助是极大的赞赏。

我想使用类似下图的 div 边框：

我不想中心被拉伸（对于宽和高 div）。我应该如何切片中心保持固定的这张照片？

我知道有一种方法可以用线性梯度来做蚂蚁，但它会消耗大量的 CPU（每个大约 10%）。我正在尝试制作替代解决方案，但发现border-image-slice令人困惑。

这是我正在使用的过时教程：http: //www.chrisdanford.com/blog/2014/04/28/marching-ants-animated-selection-rectangle-in-css/

我已经删除了过时的 css，但我不确定如何分割图像以便蚂蚁在行进。该图说：

我们将从一个 10px x 10px 的动画 gif 开始，它由九个图块组成：角落为 1×1，边缘为 1×8 或 8×1，中心为 8×8。

谢谢

when using fabricjs textbox, I'd like to add extra css to textbox so that the edit area is more beabutiful. The effect would be like this. https://www.w3schools.com/CSSref/tryit.asp?filename=trycss3_border-image

Anyone knows how to implement this?

Thank you so much.

我正在尝试使用border-image为图像创建自定义边框，但需要插入边框而不是图像外部。

这是我现在拥有的：https ://jsfiddle.net/kq69nxvn/

提前致谢！

我正在开发一个允许用户裁剪图像并为该图像选择边框的应用程序。我想知道的是，是否可以通过Javascript将具有边框样式的图像转换为base64？

上面的代码只是给画布添加了一个黑色边框。

现在，我想做的是在画布上添加一个图像/图案作为边框。

更新：根据@K3N 的回答，我创建了一个带有裁剪图像的新画布并添加了图案边框。为我的需要工作。