Más control sobre los bordes CSS con imagen de fondo

 

 

 

Puedes hacer un CSS típico bordercon guiones o puntos. Por ejemplo:

.box { border: 1px dashed black; border: 3px dotted red;}

No tienes mucho control sobre el tamaño o la longitud de los guiones o espacios. ¡Y ciertamente no puedes darles inclinación, desvanecimiento o animación a los guiones! Sin embargo, puedes hacer esas cosas con algunos trucos.

Amit Sheen construyó este fantástico generador de bordes discontinuos:

El truco consiste en utilizar cuatro fondos múltiples. La backgroundpropiedad toma valores separados por comas, por lo que al establecer cuatro fondos (uno en la parte superior, derecha, inferior e izquierda) y dimensionarlos para que parezcan un borde, se desbloquea todo este control.

 

Like so:

.box { background-image: repeating-linear-gradient(0deg, #333333, #333333 10px, transparent 10px, transparent 20px, #333333 20px), repeating-linear-gradient(90deg, #333333, #333333 10px, transparent 10px, transparent 20px, #333333 20px), repeating-linear-gradient(180deg, #333333, #333333 10px, transparent 10px, transparent 20px, #333333 20px), repeating-linear-gradient(270deg, #333333, #333333 10px, transparent 10px, transparent 20px, #333333 20px); background-size: 3px 100%, 100% 3px, 3px 100% , 100% 3px; background-position: 0 0, 0 0, 100% 0, 0 100%; background-repeat: no-repeat;}

Me gustan las gomitas.

 






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. ¿Cómo se hace el tamaño máximo de fuente en CSS?
  2. Cambiar el tamaño de los valores en pasos en CSS
  3. ¿Qué hace “revertir” en CSS?
  4. CSS4 es una mala idea

Más control sobre los bordes CSS con imagen de fondo

Más control sobre los bordes CSS con imagen de fondo

No tienes mucho control sobre el tamaño o la longitud de los guiones o espacios. ¡Y ciertamente no puedes darles inclinación, desvanecimiento o animación a

programar

es

https://pseint.es/static/images/programar-mas-control-sobre-los-bordes-css-con-imagen-de-fondo-1674-0.jpg

2024-06-13

 

Más control sobre los bordes CSS con imagen de fondo
Más control sobre los bordes CSS con imagen de fondo

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences