What should I do if qq browser does not support css3?

QQ browser does not support css3 solutions: 1. Add "-webkit-, -ms-" compatibility prefix; 2. You need to add browser engine prefix attributes such as "@keyframes, border-radius, box-shadow, backface-visibility" etc.

The operating environment of this tutorial: windows7 system, qq browser V10.7.0&&CSS3 version, Dell G3 computer.

Related recommendations: "css video tutorial"

What should I do if the qq browser does not support css3?

css3 attributes, such as keyframe and animation, need to be prefixed with webkit and ms. For different browsers on mobile phones, more prefixes may be added. This achieves the purpose of adapting to all browsers.

The method to solve the problem that qq browser does not support css3 is as follows:

1. Add the following compatibility prefix

-webkit-  /* 使用Webkit引擎的浏览器 */ 
-ms-    /* Internet Explorer */

2. The main need is to add browsing The attributes of the vendor-prefix include:

@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, example:

/* 简单属性 */ 
.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; } 
}

The above is the detailed content of What should I do if qq browser does not support css3?. For more information, please follow other related articles on the PHP Chinese website!