问题标签 [border-image]

我在我的 div 底部添加一个图像边框，如下所示：

HTML：

CSS：

这行得通，但border-image实际上比我的div.

问题图：

我该如何解决这个问题？

演示在这里

此页面http://wildlife.x-tremeteam.com利用 CSS 边框图像属性和具有透明边缘的 .png 图像在我的 div 上创建“撕纸”外观。除了在我的 Android（三星 SIII）上，无论我使用的是其默认浏览器还是 Chrome 应用程序，它都能很好地工作。在那我可以看到 20px 边框的内侧和外侧有轻微的边缘。有趣的是，我没有看到角落的边缘。带边框的 div 的背景是透明的。我只对其中的 div 应用背景颜色。

我桌面上的浏览器、我用于测试的 iPhone 以及 responsinator.com 上的所有渲染都没有显示图像的边缘。

它一定与 div 的 background-color 属性有关，因为如果我将它设置为 RED，边缘会变成红色。但是，使此属性透明不会删除它。

CSS 如下，其中还包括一个没有帮助的默认 div 属性：

谢谢，我一直盯着这个几个小时，无法弄清楚。

目前我正在使用边框图像来获得六边形。我想动态改变六边形的颜色。如果我尝试使用背景颜色更改六边形的颜色，则只有方形背景颜色会发生变化。

这是当前代码和结果。我的要求是得到一个像这样的黑色六边形：

我想让这个图像在底部边框上重复。它工作正常，除了它不会向我显示全宽图像，而只会显示它的中间部分。我需要做什么才能重复完整图像？

小提琴

我的代码：

编辑：

我发现了如何做到这一点（至少在我的情况下，它是我想要的）。我想，由于border-image-slice将图像切成 9 个部分并且只重复中间部分，因此我编辑了我的图像，因此它显示相同的部分 3 次。现在图像被切片，中间部分仍然是完整图像。

我正在尝试通过单击单选按钮更改边框图像并执行以下操作：

我收到以下错误：

为什么这适用于“border”选项，但不适用于“borderImage”选项。我想在点击时定义它，因为我在文档的不同部分定义的所有 JS 函数都没有被识别。

border-top-color是#9b9c9d和border-bottom-color是#f6f9fc。_ 渐变旨在border-left将和上的顶部颜色转换为底部颜色border-right。

我如何混合border-left-imageandborder-right-image与border-top-colorand border-bottom-color？

HTML

CSS

我将 CSS3 边框图像与 scale3d 转换结合使用。效果很好，除了在谷歌浏览器中。Chrome 在背景被裁剪的边框图像块之间显示了一些透明条纹。

我做了一个截图：

这是HTML代码：

和CSS代码：

我还为你做了一个小提琴：https ://jsfiddle.net/kd7sz0s5/1/

问题似乎与 scale3d 命令有关。因为当我将 scale3d 值设置为偶数（例如 scale3d(3,3,1)）时，条纹正在消失。

希望你们能帮助我。

我真的是 CSS 新手，我的任务是创建 2 个线性渐变作为 div 的边框，如下图所示。

我用于border-image内部，但我不知道如何创建另一个边框。

因为background-image您可以添加任意数量radial-gradient和/或linear-gradient您想要的。但border-image似乎你只能添加一个。如果觉得很奇怪，因为渐变的显示原理，边框和背景应该是一样的吧？

有没有办法在 中添加多个渐变border-image？我只对纯 CSS 解决方案感兴趣。

这不起作用，因为它包含超过 1 个渐变：

https://jsfiddle.net/thadeuszlay/p6r2p78g/

这有效，但仅包含一个渐变：

https://jsfiddle.net/thadeuszlay/p6r2p78g/1/

由于我不确定这是编程方式还是照片编辑方式，因此我将其发布在这里。如果我不得不将其发布到其他地方，我深表歉意。

无论如何，我正在尝试使用该border-image属性使用此图像制作漂亮的边框：

但这并不适合我。我出现了奇怪的现象。这是我的代码：

JSFiddle

所以，我需要一些技巧来解决这个问题。结果应该是这样的（不完全是，类似的）：

请注意，不会定义宽度。可以延长

差不多，它应该重复图像的中间部分并留下边缘。但我得到了新生儿绘画的结果。那么，是否有任何提示或解决方案？我做过研究，但没有一个包括我的愿望。