CSS 边框 alpha 不工作

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。如果您不使用 background-clip，边框会继承背景颜色，然后应用 border-color。 https://jsfiddle.net/a2bxzk7z/

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

Answer 2

如果边框不是完全实心且不透明或 background-clip 不是 border-box，则元素的边框颜色会受背景影响。

在你的例子中，背景是黑色的。将 background-clip 的属性更改为 padding-box 将解决此问题。 background-clip 的默认属性是 border-box.

The background-clip property specifies the painting area of the background.

这个属性有三个可能的值。

border-box：默认值。背景被裁剪到边框
padding-box: 背景裁剪到padding box
content-box: 背景裁剪到内容框

参考

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

CSS 边框 alpha 不工作

CSS Border alpha not working

css

border

alpha