CSS 边框 alpha 不起作用答案

【问题标题】：CSS Border alpha not workingCSS 边框 alpha 不起作用
【发布时间】：2016-05-02 06:14:11
【问题描述】：

我只是不明白这怎么行。下例中的边框应该是透明的，这样才能看到下面的文字。

就我而言：将边框的 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;
}

【问题讨论】：

标签： css border alpha

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

此属性有三个可能的值。

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

参考

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

【讨论】：