-webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-fill: auto; -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-fill: auto;
我是CSS的初学者,而前几天我在看一些CSS代码时,发现了以下几行。在我以前学习CSS的教程中,我从未见过像这些行这样的内容。有人可以向我解释这些内容吗?或者给我一个可以学习实现这些内容的资源?
这些是相关渲染引擎(-webkit适用于Chrome,Safari;-moz适用于Firefox,-o适用于Opera,-ms适用于Internet Explorer)提供的供应商前缀属性。通常,在W3最终澄清/定义之前,它们用于实现新的或专有的CSS功能。
-webkit
-moz
-o
-ms
这允许针对每个单独的浏览器/渲染引擎设置特定的属性,以便安全地解决实现之间的不一致。随着时间的流逝,前缀(至少在理论上)将被删除,因为该浏览器将实现该属性的无前缀最终版本。
为此,通常最好的做法是先指定供应商前缀的版本,然后再指定非前缀版本,以使非前缀属性在实现后将覆盖卖方前缀的属性设置。例如:
.elementClass { -moz-border-radius: 2em; -ms-border-radius: 2em; -o-border-radius: 2em; -webkit-border-radius: 2em; border-radius: 2em; }
具体来说,要解决您的问题中的CSS,请引用以下行:
为Webkit浏览器和Firefox 指定column-count,column-gap和column-fill属性。
column-count
column-gap
column-fill