no es nada divertido, cada navegador tiene su propia funcion CSS, por lo general tiene un prefijo:
-moz : mozila
-ms : Microsoft
-o : opera
-webkit : webkit
un ejemplo de gradiante vertical:
Código CSS:
Ver original/* For WebKit */
background: -webkit-gradient(linear, left top, left bottombottom, from(rgba(255,0,0,1)), to(rgba(0,0,255,.25)));
/* For Mozilla */
background: -moz-linear-gradient(top, rgba(255,0,0,1), rgba(0,0,255,.25));
/* For lt IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(gradientyype=0,
startColorstr='#88ff0000', endColorstr='#3300ff00');
un ejemplo para crear sombras:
Código CSS:
Ver originalmargin: 40px;
background-color: rgb(68,68,68); /* Needed for IEs */
-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
zoom: 1;
girando en 180 grados:
Código CSS:
Ver original-webkit-transform: rotate(180deg) ; /* los valores van desde el 0 al 360 */
-moz-transform: rotate(180deg) ;
-o-transform: rotate(180deg) ;
como verás, Firefox posee mas filtros y webkit le sigue, mientras que IExplorer y Opera se quedan atrás.
Safari, Chrome, iPhone, iPad, Android, etc. son Webkit