问题标签 [border-image]

我希望我<div>的底部边框从远离左侧的距离开始。就像是：

where^代表一块边界。

我使用border-image. 我将 a 设置border-image为linear-gradient()图像，该图像开始透明，并从某些像素变为灰色。

现在新的要求是在现有线的正下方添加一条 1px 的白线来模拟 3d 效果。我以为我可以简单地为边框图像添加一个垂直渐变，但我不知道该怎么做。

我正在使用border-image属性来创建具有 9 片的样式组件。我还使用 csstransform: scale(x)属性根据屏幕尺寸缩小/放大我的元素。我遇到的问题是，当比例设置为整数（如 1、2、3 ......很难修复它。

border-image-slice我已经尝试为 以及设置不同的值scale。最初认为当小数点后的数字为奇数时会导致此问题，但无论如何这是一个奇怪的想法。

预期的结果是在使用比例时在边界上不显示线条/间隙，或者我也愿意改变我们缩放事物的方式。无论屏幕大小如何，我基本上都希望在桌面应用程序上保持相同的布局。这是针对我正在开发的桌面游戏，它在 UI 端使用 JS。

当 scale 是一个整数时的预期结果，在这种情况下设置为 6：

注意当我将比例设置为 6.25 时的线条

试图制作如下图所示的多色底部边框，但失败了。

尝试使用border-image: linear-gradient()，但没有成功。它只得到其中一种颜色：#707070.

我想使用图像作为边框并找到以下代码：

缺少的是像转换这样的歌剧属性：-o-transition

将其添加为是否明智

-o-border-image

还是没有必要？

我添加了边框图像切片，但边框仍然只显示角落。当我希望它直接放在它上面时，它也会显示在条纹边框之外。我究竟做错了什么？

边框图像是一个 svg 文件。

这是它在 Chrome 中的外观：

这就是它在 IE 11 中的样子。

我在这里遵循了建议：Internet Explorer 11 是否支持边框图像？

这是CSS代码：

我也尝试了此链接中的生成器并尝试了该代码： https ://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator

如何使边框图像看起来像 Chrome 中的那样？

在下面的代码中，我希望两个 div 都是圆形的。但是第一个border-image应用的是正方形。我怎样才能解决这个问题并让它变圆？

我正在尝试仅将边框图像添加到标题的底部。它适用于 Chrome，但不适用于 Safari。

这是代码：

我们知道，如果想对任何单个元素应用不同的颜色属性，那么最后一个属性将像这样适用：

所以文本的颜色会像往常一样是黄色的。但是，在我的情况下，问题是什么？？？

如果我写这个命令效果正常：

但是如果我写这个命令，效果就不能正常工作：

或者，

或除我上面提到的第一个订单之外的任何其他订单。

我正在尝试创建一个与此示例中的几乎完全相同的主体边框：它随窗口的大小而变化，但不受溢出的影响。

https://css-tricks.com/examples/BodyBorder/

不过，我找不到任何有关如何使用 a 来执行此操作的信息border-image。我已经border-image设置好了我的和它的参数；我只是不知道如何在不被溢出破坏的情况下将其应用于正文，我尝试过的所有代码片段要么完全阻止滚动，使得溢出简单地消失在页面上方，要么未能阻止边界不会被溢出中断。

如果启动时有一些方便的方法可以在边界边缘设置一个溢出文本会消失的区域，那就太好了。

编辑：添加样式代码。作为对其中一个评论的回应，我想专门使用一个图像——一个边框图像，而不仅仅是颜色。我只是想调整我已经工作的边框图像样式。