[分享]css3手机没效果

最近，很多开发者在使用CSS3时遇到了一个问题：他们的手机没有出现效果。原因在于CSS3的很多属性只能在支持该属性的浏览器中才能正常显示。然而，在移动端上，不同的浏览器会支持不同的CSS3属性，因此我...

最近，很多开发者在使用CSS3时遇到了一个问题：他们的手机没有出现效果。

原因在于CSS3的很多属性只能在支持该属性的浏览器中才能正常显示。然而，在移动端上，不同的浏览器会支持不同的CSS3属性，因此我们需要对不同的浏览器进行适配。

以下是一些常用的CSS3属性，以及它们在移动端上的兼容性：

-webkit-border-radius: 支持iOS和Android 2.1+
border-radius: 支持iOS 4+和Android 4.0+
-webkit-box-shadow: 支持iOS和Android 2.1+
box-shadow: 支持iOS 3.2+和Android 2.3+
-webkit-transform: 支持iOS和Android 2.1+
transform: 支持iOS 3.2+和Android 3.0+
-webkit-transition: 支持iOS和Android 2.1+
transition: 支持iOS 3.2+和Android 4.0+ 

如果我们要使用这些属性，我们需要使用浏览器前缀来指定该属性的版本。例如，我们想要使用border-radius，在不同的浏览器中，我们需要编写以下代码：

div {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
} 

这样，在iOS和Android 2.1+的浏览器中，我们就可以看到正确的border-radius效果了。

总而言之，如果您在移动端上遇到了CSS3效果无法显示的问题，那么您需要先了解不同浏览器对CSS3的支持情况，并采用前缀对不同版本的属性进行适配。