CSS 边框 alpha 不起作用

Question

我只是不明白这怎么行不通。下面示例中的边框应该是透明的，以便人们可以看到其下方的文本。

就我而言:将边框的 alpha 设置为 0 使其变为白色。这里它变成黑色。

https://jsfiddle.net/taqqcu5j/

// Altought this is not a must, i need it to make a visual illusion perfect.

<p>TEXT</p>

<div class='thisElement'></div>

CSS

.thisElement{
  position:absolute;
  width:100px;
  height:100px;
  background-color:#000;
  border:100px solid rgba(255,255,0,.5);
}

P{
  position:absolute;
  font-size:40px;
}

Answer 1

您需要在元素上使用background-clip。如果不使用背景剪辑，边框将继承背景颜色，然后应用边框颜色。 https://jsfiddle.net/a2bxzk7z/

.thisElement {
  background-clip: padding-box;
}