具有多个值（px＆amp; rem）的CSS元素

Question

我有一些CSS代码，其中许多元素对单个css属性具有多个值。

例如，在CSS下面会生成一个如下所示的按钮。

CSS

.btn-gold {
    display: block;
    text-decoration: none;
    font-size: 20px;
    font-size: 2rem;
    line-height: 22px;
    line-height: 2.2rem;
    color: #222;
    padding: 8px 0;
    padding: 0.8rem 0;
    text-align: center;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: rgb(254,196,26);
    background: -moz-linear-gradient(top, rgb(254,196,26) 0%, rgb(255,170,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(254,196,26)), color-stop(100%,rgb(255,170,0)));
    background: -webkit-linear-gradient(top, rgb(254,196,26) 0%,rgb(255,170,0) 100%);
    background: -o-linear-gradient(top, rgb(254,196,26) 0%,rgb(255,170,0) 100%);
    background: -ms-linear-gradient(top, rgb(254,196,26) 0%,rgb(255,170,0) 100%);
    background: linear-gradient(to bottom, rgb(254,196,26) 0%,rgb(255,170,0) 100%);
    -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .4);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .4);
}

结果

现在我不明白为单个属性赋予多个值的目的是什么;看 font-size ， line-height 和 padding 给出两个值？

font-size: 20px;
font-size: 2rem;
line-height: 22px;
line-height: 2.2rem; 
padding: 8px 0;
padding: 0.8rem 0;

这是一个有效的CSS，以及允许单个属性允许多少个值组合。

Answer 1

这是为旧版浏览器提供后备支持。

现代浏览器首先应用“22px”行高，然后用“2.2rem”行高覆盖它。旧浏览器将应用“22px”，然后将无法理解“2.2rem”并且不会使用它。

这通常用于rem值，例如线性渐变的背景。

PS：请注意，您不再需要box-shadow或border-radius的前缀。 ;）

Answer 2

Px是绝对长度 （cm，mm，in，pt，pc，px） 并且

Rem是字体相对长度 （em，ex，ch，rem）

px或rem将在浏览器上运行检查Chrome中的元素并且只看到一个值接受带有虚线的另一个拒绝