1. paint-order

---

Controla la secuencia de dibujado en elementos SVG o texto. Para textos, solo se modifica el orden entre el contorno y el relleno.

.texto-personalizado {
  -webkit-text-stroke: 1.8px #2E86C1;
  paint-order: stroke;
}

.elemento-svg {
  paint-order: stroke fill;
}

2. accent-color

---

Define el color de énfasis en componentes de interfaz de usuario, como entradas y controles interactivos.

.check-personalizado {
  accent-color: #C0392B;
}

.radio-personalizado {
  accent-color: #27AE60;
}

.slider-personalizado {
  accent-color: rgb(52, 152, 219);
}

.barra-carga {
  accent-color: hsl(25, 90%, 55%);
}

3. @supports (-webkit-overflow-scrolling: touch) {}

---

Consulta de soporte para detección específica de iOS en entornos móviles, útil para ajustes de desplazamiento táctil.

4. background-blend-mode: multip;

---

Permite fusionar imágenes con fondos mediante modos de mezcla, ideal para efectos visuales dinámicos.

.contenedor-fusion {
  background-image: url('imagen-demo.jpg');
  background-color: rgba(120, 80, 200, 0.6);
  background-blend-mode: multiply;
}

• normal: Sin fusión aplicada.
• multiply: Oscurece colores al multiplicar valores.
• screen: Aclara colores mediante filtrado aditivo.
• overlay: Combina contraste según tonalidad base.
• darken: Selecciona los tonos más oscuros.
• lighten: Opta por los tonos más claros.
• color-dodge: Intensifica brillo en áreas claras.
• color-burn: Profundiza sombras en áreas oscuras.
• hard-light: Aplica iluminación fuerte similar a luz directa.
• soft-light: Genera efecto de luz difusa suave.
• difference: Calcula contraste absoluto entre capas.
• exclusion: Similar a difference con menor contraste.
• hue: Modifica solo el tono manteniendo luminosidad.
• saturation: Ajusta saturación sin alterar brillo.
• color: Aplica color mantaniendo luminosidad existente.
• luminosity: Variación de brillo preservando tono y saturación.

5. border-image-slice

---

Recorta imágenes de fondo para bordes, comúnmente usado con otras propiedades para efectos de escalado.

.borde-imagen {
  border-width: 2px 8px 2px 20px;
  border-style: solid;
  border-image-slice: 4 16 4 40 fill;
  border-image-repeat: stretch;
}

6. background-clip

---

Limita el área de renderizado del fondo, esencial para recortes creativos y animaciones.

.texto-degradado {
  background-image: linear-gradient(85deg, #E74C3C 0%, #F39C12 50%, #E74C3C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

7. filter

---

Aplica efectos visuales a elementos, permitiendo transformaciones como desenfoque o ajustes de color.

.efecto-sombra {
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

• blur(px): Genera desenfoque gaussiano.
• drop-shadow(): Crea sombras proyectadas.
• opacity(%): Controla transparencia.
• grayscale(%): Convierte a escala de grises.
• contrast(%): Modifica contraste de imagen.
• invert(%): Invierte colores.
• brightness(%): Ajusta brillo linealmente.
• saturate(%): Altera intensidad de color.
• sepia(%): Aplica tono sepia vintage.
• hue-rotate(deg): Rota matices de color.

8. grid

---

Implementa layouts basados en cuadrícula para diseños bidimensionales complejos.

.cuadricula {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}

9. flex

---

Facilita layouts flexibles para distribución equitativa de espacio entre elementos.

.distribucion-flex {
  display: flex;
}

.distribucion-flex > .item {
  flex: 1;
}

10. sticky

---

Mantiene elemenots fijos en posición relativa durante el desplazamiento, útil para barras de navegación.

.navegacion-fija {
  position: sticky;
  top: 50px;
}

11. control de saltos de línea

---

Maneja truncamiento de texto para prevenir desbordamientos.

.truncamiento-linea {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.truncamiento-multilinea {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

12. clamp

---

Define valores responsivos que se adaptan entre límites mínimo y máximo.

.tipografia-adaptativa {
  font-size: clamp(1rem, 2.5vw, 1.5rem);
}

13. clip-path

---

Crea formas de recorte personalizadas para elementos.

.forma-circular {
  clip-path: circle(45% at center);
}

14. will-change

---

Indica al navegador qué propiedades cambiarán, optimizando rendimiento de animaciones.

.elemento-animado {
  will-change: transform, opacity;
}

15. touch-action

---

Controla comportamientos táctiles predeterminados en dispositivos con pantalla sensible.

.interaccion-tactil {
  touch-action: pan-y pinch-zoom;
}