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

时间:2011-11-09 22:56:16

标签: css google-chrome google-chrome-devtools

请参阅以下图片:

enter image description here

为什么padding-topmargin-top完全不透明,但padding-right等不是?

2 个答案:

答案 0 :(得分:4)

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

已完成以下表格:

selector1 {
    margin: 20px;
}

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

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

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

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

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


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

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

此属性明确定义了background-colorbackground-imagebackground-repeat,但未定义background-positionbackground-clipbackground-size等(默认)使用的值)因此它们将被视为半透明。

答案 1 :(得分:0)

灰色条目是未定义但在运行时计算的规则。请参阅this page