Los siguientes atributos no son buenos para la compatibilidad del navegador.
1. Transformación: Rotar (45deg)
2. Border-Top-Left-Radius Esta propiedad le permite agregar bordes redondeados a los elementos
3.Border-Radius Esta propiedad le permite agregar bordes redondeados a los elementos
4. La propiedad de la bandeja de caja agrega una o más sombras a la caja
5. La propiedad de la sombra de texto establece una sombra en el texto
6. Transición
Para ser mejor compatible con cada navegador, se requieren prefijos.
-o- /*navegador de ópera* /
-Webkit- /*Webkit Kernel Browser Safari y Chrome* /
-ms- /*es decir 9* /
-Moz- /*navegador Firefox* /
1. Transformación: Rotar (45deg) El objeto se gira a través de la propiedad de transformación, donde (45 grados) es el ángulo de rotacióntransformar: girar (45deg);
-Ms-Transform: Rotate (45deg); /*Es decir, 9*/
-O-transform: girar (45deg); /*Navegador de ópera*/
-WebKit-Transform: Rotate (45deg); /*WebKit Kernel Browser Safari y Chrome*/
-Moz-Transform: Rotate (45deg); /*Navegador Firefox*/
2. Border Border-Radius-Radius de Border-Top-Top-Left Esta propiedad le permite agregar bordes redondeados a los elementosEl primero puede elegir la posición donde se agrega el borde redondeado
Radio de la cabeza fronteriza, radio fronterizo-choque, radio-fondo de la frontera, radio-fondo-marcio, radio-fondo-marco de la derecha
Border-Top-Left-Radius Esta propiedad le permite agregar bordes redondeados a los elementos, al igual que Border-Radius, solo para controlar dónde se deben agregar los bordes redondeados.
3. La propiedad de la bandeja de la caja agrega una o más sombras al cuadro, y la propiedad de la sombra de texto establece una sombra en el textoShadow de caja: H-Shadow || V-Shadow || desenfoque || extendido || Color || recuadro;
Propiedades: posición de la sombra horizontal || Posición de la sombra vertical || Distancia de desenfoque || Tamaño de la sombra || Color de la sombra || Cambiar la sombra externa (principio) a la sombra interna
Shadow de caja: 1px 1px 3px #292929;
Shadow de texto: H-Shadow || V-Shadow || desenfoque || color;
Shadow de texto: 0px -1px 0px #000;
4. TransiciónPropiedad || duración || Timing-Función || demora
Especifica el nombre del atributo CSS que establece el efecto de transición || Especifica cuántos segundos o milisegundos se necesitan para completar el efecto de transición || Especifica la curva de velocidad del efecto de velocidad || Define cuándo comienza el efecto de transición
Actualmente, todos los navegadores no admiten el atributo de transición.
facilitar el valor predeterminado. La animación comienza a baja velocidad, luego se acelera, disminuyendo la velocidad antes de que termine.
La animación fácil comienza a baja velocidad.
La animación facilitada termina a baja velocidad
La animación fácil de encender comienza y termina a baja velocidad
Transición: Antecedentes 5s facilitados;
Un por ejemplo:
Copiar el código