尝试为 1px 线设置不透明度 [重复]

【问题标题】：Trying to set opacity for 1px line [duplicate]尝试为 1px 线设置不透明度 [重复]
【发布时间】：2016-12-05 00:40:42
【问题描述】：

我正在尝试执行以下操作：

border-bottom: 1px solid #00b4f5;

当我将 opacity: .8; 添加到 1px 行时，它也会将其应用于整个 #name{}。

我只希望 1px 行应用不透明度。

【问题讨论】：

将 rgba() 用于 边框颜色 而不是 hexcode。例如：border-bottom: 1px solid rgba(0,180,245,0.8) ：使用最后一个值设置 opacity

标签： css html

【解决方案1】：

如果您设置 opacity，它将影响整个元素，而使用 rgba() 将应用于您设置的特定属性。

在 rgb 中，#00b4f5 等于 rgb(0, 180, 245)，所以对于 opacity: .8您的代码将是：

.element {
    border-bottom: 1px solid rgba(0, 180, 245, .8);
}

注意：Here 是一个不错的网站，可用于在未来进行hex2rgb 转换。

【讨论】：

【解决方案2】：

为边框着色时使用rgba(255,0,0,0.8)

div {
  border-bottom: 1px solid rgba(255,0,0,0.8);
  background-clip: padding-box;               /* add if the element have a background */
}

【讨论】：