qq瀏覽器不支援css3的解決方法:1、新增「-webkit-、-ms-」相容性前綴;2、需要新增瀏覽器引擎前綴屬性如「@keyframes、border-radius、 box-shadow、backface-visibility」等。
本教學操作環境:windows7系統、qq瀏覽器V10.7.0&&CSS3版本,Dell G3電腦。
相關推薦:《css影片教學》
qq瀏覽器不支援css3怎麼辦?
css3屬性,例如keyframe和animation都需要加webkit、ms前綴,針對手機不同瀏覽器可能還要加更多前綴。以此達到適配所以瀏覽器的目的。
解決qq瀏覽器不支援css3的方法如下:
1、新增以下相容性前綴
-webkit- /* 使用Webkit引擎的浏览器 */ -ms- /* Internet Explorer */
2、主要的需求新增瀏覽器引擎前綴(vendor-prefix)的屬性包括:
@keyframes 移动和变换属性(transition-property, transition-duration, transition-timing-function, transition-delay) 动画属性 (animation-name, animation-duration, animation-timing-function, animation-delay) border-radius box-shadow backface-visibility column属性 flex属性 perspective属性
3、範例:
/* 简单属性 */ .myClass { -webkit-animation-name: fadeIn; -ms-animation-name: fadeIn; animation-name: fadeIn; /* 不带前缀的放到最后 */ } /* 复杂属性 keyframes */ @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 0; } } /* 不带前缀的放到最后 */ @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 0; } }
以上是qq瀏覽器 不支援css3怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章!