css - 半透明 CSS 属性在 Google Chrome 开发者工具中意味着什么？

Question

请看下图:

为什么 padding-top 和 margin-top 是完全不透明的，而 padding-right 等不是？

Answer 1

我认为它们是半透明的，因为它们没有明确定义。

确认下表:

selector1 {
    margin: 20px;
}

selector2 {
    margin: 20px;
    margin-top: 10px;
}

selector3 {
    margin: 10px 20px 30px;
}

在第一个示例 (selector1) 中，所有 margin-* 属性都将是半透明的，因为没有明确定义 - 正在使用快捷方式。

在第二个示例 (selector2) 中，只有 margin-top 是完全不透明的，因为它在自己的属性中定义。

在上一个示例 (selector3) 中，margin-top 和 margin-bottom 是明确定义的，因此它们将是完全不透明的。但是 margin-left 和 margin-right 由单个值定义，因此它们将是半透明的。

---

半透明颜色也适用于默认值，例如:

background: red url(...) no-repeat;

此属性显式定义了 background-color、background-image 和 background-repeat，但是 background-position、background-clip、background-size 等未定义(使用默认值)，因此它们将被视为半透明。