在 CSS 中的 shorthand 转换中提及属性名称有什么意义

Question

我不明白为什么有些人在 shorthand 转换中提到属性名称，而如果他们不这样做，它会是一样的。

假设有一个按钮我想更改它的背景

.btn{
  padding: 10px;
  border-radius: 5px;
  background: #fff;
  border: none;
  outline: none;
  cursor: pointer;
  transition: .3s;
}

.btn:hover{
  background: #ddd;
}

transition: background .3s; 和 transition: .3s; 结果相同，但为什么有人提到背景？它会影响性能吗？

Answer 1

while it will be the same if they don't do that.

不，这不一样。一个简单的例子：

.box {
  background:red;
  display:inline-block;
  width:100px;
  height:100px;
  transform:scale(1);
}

.box:hover {
  transform:scale(1.5);
  background:green;
}

<div class="box" style="transition:0.3s;"></div>

<div class="box" style="transition:background 0.3s;"></div>

如果我们考虑背景，它们只有相同的结果，但第一个涵盖所有属性，在许多情况下，我们不需要转换所有属性，而是特定的一个。

在 CSS 中的 shorthand 转换中提及属性名称有什么意义

What's the point of mentioning property name in shorthand transition in CSS

css

frontend

web-deployment

在 CSS 中的 shorthand 转换中提及 属性 名称有什么意义

What's the point of mentioning property name in shorthand transition in CSS

css

frontend

web-deployment

在 CSS 中的 shorthand 转换中提及属性名称有什么意义