问题标签 [border-image]

所以我有一个带边框的 div。但是，没有显示边框图像。它显示为普通的实心边框。很奇怪，该 URL 有效且有效，它来自谷歌驱动器，一切看起来都不错。HTML 本身可以工作，但是当我在电子邮件中使用它时却不行。

这真的很奇怪；我从来没有见过这样的事情。我正在发送到 Gmail 顺便说一句，不确定它是否适用于Outlook或其他东西。

PS：我知道边框看起来有点奇怪；那是因为它的高度很小。我知道这一点，所以不要抱怨。

我正在尝试使用此代码仅制作水平（/垂直）边框：

有用。但仅限于 Chrome。铬合金

在 Firefox 行交换方向。它们变成垂直的： FF

如果我更改“border-image-slice: 100% 1%;” 到“边框图像切片：1% 100%；” 浏览器也会改变效果。

也许有人处理它？也许我错过了什么？也许存在跨浏览器解决方案。

我想用css创建一个奇怪的三角形。我的第一个想法是使用透明边框，transform: rotate它起作用了（见左三角形）。现在我想使用渐变边框图像图案作为同一个三角形的背景，但我不能让它工作。我尝试了很多事情，比如改变border-width、使用包装器overflow:hidden等等，但没有任何效果。在这里，我发布了我的一个尝试（见正确的形状），因为您看到该图案占据了所有空间，而不是遵循三角形。有任何想法吗？

编辑： Andrey Fedorov 的回答很好，但是当背景不是纯色时会出现问题，例如：

我正在尝试为我的边框添加图像，但现在它似乎只适用于顶部和底部。我需要它绕过整个容器。

这是边框图像：

这是我的容器目前的样子：

相关HTML：

相关CSS：

我正在尝试在 div 周围放置边框图像。我遵循了关于 css-tricks 的提示，但我无法让它工作。这是页面：http ://darylkeep.com/aanbod/

编辑：我在角落里得到四个小边框，而不是整个 div 周围的一个。为什么是这样？

我也想知道这是否仍然是这样做的方法，因为我以前没有遇到过这个属性。有没有更好的办法？提前致谢。

.

Safari treats border-color:transparent as overriding border-image, whereas the opposite is true in Chrome and Firefox. (Safari is consistent with the others if border-color is an opaque or semitransparent color. rgba(0,0,0,0) behaves the same as transparent. I don't know what IE does.) Concretely, this snippet:

draws a light blue border around the div in Chrome and Firefox, but a red border in Safari.

Questions:

1. Which behavior is correct?
2. Is there any way to force Safari to behave like Chrome and Firefox?

Note: I've only tested the above example with Safari 10.0 (11602.1.50.0.10), Firefox 48.0.2, and Chrome 53.0.2785.116 (all on OSX 10.11) but the website it's cut down from has exhibited the same behavior consistently for at least a year, so I do not believe this is particularly version-specific.

Note 2: border-color:transparent is present for the sake of browsers that don't support border-image. (For instance, I do still care about IE 7 through 10 for the real website this is cut down from.) Proposed solutions should show the background of the wrapper, not a visible border, in browsers that don't support border-image.

我想使用边框图像和线性渐变来模拟投影效果（出于滚动性能的原因，我没有使用本机框阴影效果）。

从下面的示例和fiddle中可以看出，我尝试的方法涉及使用border-image 作为渐变，使用border-image-outset 将阴影移到内容框之外，使用border-width 仅显示底部边缘。

诚然，我不太了解边界图像，尤其是在将它与线性渐变一起使用时。通过反复试验，我取得了似乎令人满意的结果。但事实证明，当 div 的宽度足够短时，“阴影”会完全消失。

我可以做些什么来实现像顶盒一样的阴影，但不管盒子大小如何都能工作？非常感谢您对此的帮助！

我正在尝试border-image在我的 CSS 中使用速记语法，例如：

但是，我同时使用 LESS。在这种情况下，斜线也是除法的符号，该表达式产生：

我尝试fill在斜线之前的语句中添加一个关键字，并使图像在中心区域内透明。但是，这不是我想要的，我无法为该border-image-outset属性添加另一个斜线。

根据http://caniuse.com/#search=border-image ，使用单个属性border-image-slice是可以的，但在某些设备上不起作用。我正在做一个 Android 项目，这里需要移动兼容性。

还有其他解决方案吗？谢谢。

是否有可能实现类似background-repeat: space和/或background-background: round使用重复渐变作为 abackground-image或在除 FF 之外的浏览器中border-image-repeat: space|round使用重复渐变作为 a时的效果？border-image

这是由Create a perfect dashed line with background-image in CSS启发而来的，它要求一种在最后没有部分破折号的虚线的方法。在这种情况下，它background-image是一个图像文件，因此background-size: repeat或background-repeat: round将起作用（取决于确切的需要）。

但我不能让它与 a linear-gradientor repeating-linear-gradientas background-imageor 一起使用border-image。举几个例子：

第一个示例 ( #linear-gradient-background-image) 在 FF 中有效。但除此之外，在div.

在 webkit 浏览器中，#linear-gradient-background-image当容器调整大小时，可以看到 's dash 进行了某种调整，但我不确定它在做什么，无论它是什么都不是我所希望的。

我试图在我的页面上实现“信封边框”效果。

基本上，它与codepen中的相同：

http://codepen.io/danichk/pen/KdorYJ

但它在 safari 中不起作用。而且我还发现，即使是 w3schools 中的“border-image”示例似乎也不起作用。其中已经考虑支持多浏览器。

http://www.w3schools.com/css/tryit.asp?filename=trycss3_border-image3

事实上，我也尝试过 compass 来生成一个“多浏览器”友好的 css，如下所示：

罗盘：

css

有人对此有任何想法吗？非常感谢。

我的 Safari 版本是：版本 10.0.1 (12602.2.14.0.7)