Question

我只是不明白这是如何工作的。下面示例中的边框应该是透明的，以便可以看到它下面的文本。

就我的情况而言：将边框的alpha设置为0会使其变为白色。这里变黑了。

// 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;
}

Answer 2

如果边框不是完全实心且不透明或背景剪辑不是边框，则元素的边框颜色会受到背景的影响。

在您的情况下，背景为黑色。将background-clip的属性更改为padding-box将解决此问题。 background-clip的默认属性是border-box。

background-clip属性指定背景的绘画区域。

此属性有三个可能的值。

border-box：默认值。背景被剪切到边框
padding-box：背景被剪切到填充框
content-box：背景被剪切到内容框

参考

http://www.w3schools.com/cssref/css3_pr_background-clip.asp

CSS Border alpha无效

2 个答案: