问题标签 [border-image]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
3 回答
7685 浏览

css - 具有透明背景的按钮渐变边框

这是我会得到的结果: 渐变边框/悬停时的渐变背景

所以默认按钮具有透明背景的渐变边框(因为我想通过它查看父级的背景)。当用户将鼠标悬停在按钮上时,我想用相同的渐变填充它有边框。

所以首先我尝试使用border-image 属性和我的边框的.svg 图像:

所以我或多或少得到了我正在等待的结果: 结果

现在,如何管理悬停动画并在不改变大小的情况下填充背景!?

也许边界图像不是最好的方法吗?

感谢您的帮助,干杯!

0 投票
2 回答
101 浏览

css - 悬停中的背景图像无法正常工作

我正在尝试添加一个悬停效果,当用户悬停在按钮上时添加背景图像,但悬停时左侧有一个仍然透明的小区域。

基本上,我添加了两个按钮,彼此相邻,问题在于第二个按钮,如果我删除第一个按钮或将第二个移动到下一行,那么它工作得很好。

这就是我得到的。 不工作

这是我删除第一个按钮后的样子 工作图像

这是代码

0 投票
1 回答
1039 浏览

python - Pyqt5 List QtPushbutton 添加border-image

我正在使用 Python 3 ( Pycharm ) 和 Pyqt5 (Windows 10)

我需要使用 QPushbutton 列表。我设法改变了按钮的颜色,没关系。尽管如此,我无法将border-image(相同的QT)的图像更改为添加按钮的函数(Add_Buttons_KA_IU)我的目录结构:

我的项目 :


0 投票
0 回答
508 浏览

css - 将图像边框添加到圆形 div

我想在圆形 div 周围设置一个图像作为边框。圆形 div 由border-radius:50%.

CSS:

HTML:

这是我的 div:

没有边框的div

边界:

边框图片

最后我想要这个:

带有图像边框的 div

0 投票
1 回答
247 浏览

css - 带边框图像的 CSS 条纹

我已经测试了几个小时,但是我似乎无法让边框图像做我想做的事。

我正在尝试将底部边框添加到带有水平条纹的 div 中。即 2px 灰色、2px 白色和 2px 灰色;即灰色和白色条纹。

像这样:

在此处输入图像描述

这是我到目前为止所拥有的:

我究竟做错了什么?

0 投票
0 回答
92 浏览

css - 如何仅在一侧应用边框图像,而在另一侧仍有边框?

我正在使用边框大小来制作三角形。我需要将边框图像添加到其中一个边框(我将使用线性渐变),同时保持其他边的边框宽度,使其保持三角形。

我试过添加一个边框图像,但它会应用于所有方面。

我希望这会显示一个向右的蓝色三角形,并能够将线性渐变应用于左边框

0 投票
3 回答
709 浏览

css - 如何使用边框图像制作自定义 CSS 边框?

我正在尝试使用border-image速记属性制作像这样的自定义css边框但失败了。有没有办法做部分边框?也许有更好的方法来实现我想要做的事情?我总是可以只插入这张图片,但一旦你这样做,它似乎不会很好地调整大小。

CSS 标题图片

0 投票
1 回答
332 浏览

css - Woocommerce - 为产品添加边框图像

我正在尝试在每个产品周围添加边框图像,我在 illustrator 中设计了图像,但无法显示。src 等是正确的。

图像是这样的 在此处输入图像描述

0 投票
0 回答
430 浏览

html - 带 svg 的图像边框 - 填充

我有一个使用 SVG 的图像边框样式的元素。我想使用 CSS 更改 SVG 的颜色。正常的填充:颜色属性适用于直接路径和 svg 元素,但我无法使用填充来更改图像边框的颜色。

我当前的代码:

和CSS:

如何更改图像边框中的 SVG 颜色?

0 投票
1 回答
101 浏览

css - 如何在边框图像切片中捕获两个底角?

我正在尝试使用border-image CSS将渐变作为底部边框添加到我的网站标题。渐变需要填充 100% 的宽度。

我可以使用border-image-width和border-image-slice让渐变填充大部分底部边框,但由于某种原因,它将两个底角排除为空白。如何让渐变在一个流中跨越所有底部?

我已经尝试完全删除border-image-slice,它填充了两个底角,但省略了底部边框的其余部分。

似乎将border-image-width和border-image-slice都设置为“0 0 X 0”应该只显示底部。目前很好。然而,这也移除了两个底角,因此有几个像素的空白区域阻止了渐变从站点的一个边缘流到另一个边缘。奇怪的是,当我完全移除底部图像切片时,只有两个底角出现渐变。我需要渐变从左下角开始,一直穿过底部到右下角。