Aunque los estilos son relativamente simples, no podrá recordarlos cuando los use. Permítanme enumerar los que se usan comúnmente aquí para profundizar su memoria.
Estilo de borde:
- border-radius: Establece el borde redondeado del elemento.
- box-shadow: agrega un efecto de sombra al elemento.
- border-image: utiliza una imagen para definir el estilo del borde.
Fondo degradado:
- linear-gradient: crea un fondo degradado lineal.
- radial-gradient: crea un fondo degradado radial.
Efectos de texto:
- text-shadow: agrega un efecto de sombra al texto.
- text-overflow: controla cómo se muestra el texto cuando se desborda.
- word-wrap: controla el ajuste de palabras largas o URL.
Efecto de transición:
- transición: agrega un efecto de transición al elemento, que puede hacer una transición suave cuando cambia el atributo.
- transformar: Realice operaciones de transformación como rotación, escalado, inclinación o traslación en el elemento.
Efecto de animacion:
- @keyframes: define fotogramas clave de animación.
- animación: aplica animación al elemento, controla la duración, el retraso y otras propiedades de la animación.
Modelo de caja:
- tamaño de cuadro: controla el modelo de cuadro del elemento, que se puede establecer en cuadro de borde o cuadro de contenido.
- flexbox: use el diseño de cuadro elástico para lograr efectos de diseño flexibles.
Diseño de respuesta:
- Consultas de medios: aplique diferentes estilos según diferentes dispositivos o tamaños de pantalla.
- unidad rem: use el tamaño de fuente en relación con el elemento raíz para definir el tamaño para el diseño receptivo.
Por supuesto, el estilo css3 es muy poderoso y hay muchos estilos. Aquí hay algunas categorías principales.