Html 透明边框中出现意外线条？

我有一个1像素透明边框的按钮。Howewer，如果你看一下我提供的例子，沿着左边框有一条较暗的线。我不知道为什么会发生这种情况以及如何解决它。我确实需要该边框为

1px实心透明

。多谢各位

*{
填充：0；
保证金：0；
框大小：边框框；
}
.集装箱{
宽度：100wh；
高度：100vh；
文本对齐：居中；
}
.card\u链接{
最大宽度：200px；
文本对齐：居中；
文字装饰：无；
最高保证金：3.5雷姆；
显示：内联块；
文本转换：大写；
颜色：白色；
背景：线性梯度（向右，hsl（236,72%，79%），hsl（237,63%，64%）；
宽度：100%；
填充：1rem0；
边界半径：5px；
边框：1px实心透明；
字母间距：1px；
}
.card\u链接：悬停{
边界：1px固体hsl（237,63,64%）；
颜色：hsl（237,63,64%）；
背景：白色；
}

---

您可以通过使用带有内边框的

框阴影来修复它

box-shadow: inset 1px 1px 1px 1px hsl(237, 63%, 64%);

移除

border: 0px solid transparent;


*{
填充：0；
保证金：0；
框大小：边框框；
}
.集装箱{
宽度：100wh；
高度：100vh；
文本对齐：居中；
}
.card\u链接{
最大宽度：200px；
文本对齐：居中；
文字装饰：无；
最高保证金：3.5雷姆；
显示：内联块；
文本转换：大写；
颜色：白色；
背景：线性梯度（向右，hsl（236,72%，79%），hsl（237,63%，64%）；
宽度：100%；
填充：1rem0；
边界半径：5px；
字母间距：1px；
}
.card\u链接：悬停{
盒影：插入0px 0px 0px 1px hsl（237,63%，64%）；
颜色：hsl（237,63,64%）；
背景：白色；
}
这是因为线性梯度。使用透明边框，使其也采用渐变色。将边框颜色设置为白色，而不是透明

试试这个：

border: 1px solid #ffffff;

与渐变背景发生了奇怪的碰撞。。。您可以使用
框阴影
执行相同的效果：


*{
填充：0；
保证金：0；
框大小：边框框；
}
.集装箱{
宽度：100wh；
高度：100vh；
文本对齐：居中；
}
.card\u链接{
最大宽度：200px；
文本对齐：居中；
文字装饰：无；
最高保证金：3.5雷姆；
显示：内联块；
文本转换：大写；
颜色：白色；
背景：线性梯度（向右，hsl（236,72%，79%），hsl（237,63%，64%）；
宽度：100%；
填充：1rem0；
边界半径：5px；
字母间距：1px；
}
.card\u链接：悬停{
盒影：0 1px hsl（237,63,64%）；
颜色：hsl（237,63,64%）；
背景：白色；
}

但在悬停时，如果有边框，您的元素将闪烁，因为它的宽度将增加2px（2*边框大小），我需要它为1px，以防止悬停时内容的大小调整。如果我悬停时为0，并且添加了1px，则内容为resized@Noob，Justinas已更新。@Justinas是的，谢谢！介意回答吗？不，只是结束问题，因为它是重复的。白色边框和透明边框不一样。如果把它放在彩色背景上，它会被看到……是的，但它在这里会起作用，这就是为什么我给按钮加了白色边框@贾斯蒂纳斯