谷歌瀏覽器的CSS私有前綴就是為了解決瀏覽器兼容性問題而產生的。當網站使用某些新的CSS屬性時,不同瀏覽器的渲染效果有可能會不同,為了保證網站在不同瀏覽器上的表現一致,就需要使用CSS私有前綴。
CSS私有前綴就是在CSS屬性前加上瀏覽器特定的標識,例如谷歌瀏覽器的私有前綴為“-webkit-”,Firefox瀏覽器的私有前綴為“-moz-”,而IE瀏覽器的私有前綴為“-ms-”。
/* 加載動畫在谷歌瀏覽器中需要加上-webkit-私有前綴 */ @-webkit-keyframes loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loading { animation: loading 2s infinite linear; -webkit-animation: loading 2s infinite linear; }
也有一些屬性會同時適用于多個瀏覽器,此時就需要加上多個私有前綴:
/* CSS3漸變在不同瀏覽器中需要加上多個私有前綴 */ .gradient { background: linear-gradient(to bottom, #ff0000, #00ff00); background: -webkit-linear-gradient(to bottom, #ff0000, #00ff00); background: -moz-linear-gradient(to bottom, #ff0000, #00ff00); background: -ms-linear-gradient(to bottom, #ff0000, #00ff00); }
但是需要注意的是,使用CSS私有前綴并不是最佳的解決方案,因為這樣會使代碼變得冗長,并且需要增加額外的維護成本。當需要使用新的CSS屬性時,應該先查看是否存在官方標準的寫法,否則再使用私有前綴。
上一篇css中怎么弄搜索表單
下一篇css中怎么寫hover