html - 不能在一个元素上设置两个半透明边框

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>