无法在元素上设置两个半透明边框

Question

我想在顶部和底部有半透明的边框。我正在使用 rgba(( 定义颜色。现在当 alpha 设置为 1 (border: 1px solid rgba(255, 51, 0, 1);( 时，两个边框都正确显示，现在更改此值后<1 (border: 1px solid rgba(255, 51, 0, 0.7);(，两个边框都完全消失。

.test{
	width: 100px;
	height: 100px;
	border: 1px solid rgba(255, 51, 0, 0.7);
	border-left-style: none;
	border-right-style: none;
	background-color: rgba(25, 51, 77, 0.7);
}

<div class="test"></div>

Answer 1

当我尝试这样做时，我仍然可以看到Chrome中的半透明边框，看看如果将它们变大(5px(会发生什么。 还是我错过了你的观点？也许存在浏览器问题？

.test{
	width: 100px;
	height: 100px;
	border: 5px solid rgba(255, 51, 0, 0.7);
	border-left-style: none;
	border-right-style: none;
	background-color: rgba(25, 51, 77, 0.7);
}

<div class="test"></div>