gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 08:39:29 25 4
gpt4 key购买 nike

<分区>

这是我会得到的结果: Gradient border / Gradient background on hover-over

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

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

button {
background: transparent;
background-repeat: no-repeat;
border: 3px;
border-style: solid;
border-color: transparent;
border-image-source: url(assets/images/icons/border.svg);
border-image-repeat: stretch stretch;
border-image-slice: 49;
border-image-width: 100px;
border-image-outset: 6px;
padding: 16px 28px;
border-radius: 100px;
}

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

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

也许 border-image 不是最好的方法?

感谢您的帮助,干杯!

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com