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

Question

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

＆＃13;

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>