Controle la longitud del trazo del borde punteado y la distancia entre los trazos

¿Es posible controlar la longitud y la distancia entre los trazos del borde discontinuo en CSS?

Este ejemplo a continuación se muestra de manera diferente entre los navegadores:

div { border: dashed 4px #000; padding: 20px; display: inline-block; } 
 
I have a dashed border!

Grandes diferencias: IE 11 / Firefox / Chrome

IE 11 fronteraBorde de FirefoxBorde cromado

¿Hay algún método que pueda proporcionar un mayor control de la apariencia de los bordes punteados?

El procesamiento de Css es específico del navegador y no conozco ningún ajuste fino, debe trabajar con las imágenes recomendadas por Ham. Referencia: http://www.w3.org/TR/CSS2/box.html#border-style-properties

El valor de propiedad de borde punteado nativo no ofrece control sobre los guiones por sí mismos … ¡así que traiga la propiedad de border-image !

Prepara tu propio borde con border-image

Compatibilidad : ofrece una gran compatibilidad con el navegador (IE 11 y todos los navegadores modernos). Un borde normal se puede establecer como una alternativa para navegadores antiguos.

Vamos a crear estos

¡Estos bordes mostrarán exactamente el mismo navegador cruzado!

Ejemplo de objetivoEjemplo de objetivo con brechas más amplias

Paso 1 – Crea una imagen adecuada

Este ejemplo tiene 15 píxeles de ancho por 15 de alto y las brechas son actualmente de 5 píxeles de ancho. Es un .png con transparencia.

Esto es lo que parece en photoshop cuando se acerca:

Ejemplo de fondo de imagen de borde explotado

Esto es lo que parece escalar:

Ejemplo de fondo de la imagen de borde Tamaño real

Controlar la brecha y la longitud de la carrera

Para crear espacios o trazos más amplios / más cortos, amplíe / acorte los espacios o trazos en la imagen.

Aquí hay una imagen con espacios más amplios de 10 píxeles:

Brechas más grandes correctamente escalado = Grandes brechas para escalar

Paso 2: crea el CSS: este ejemplo requiere 4 pasos básicos

  1. Definir border-image-source :

     border-image-source:url("http://i.stack.imgur.com/wLdVc.png"); 
  2. Opcional : defina el ancho de la imagen de borde :

     border-image-width: 1; 

    El valor predeterminado es 1. También se puede establecer con un valor de píxel, un valor porcentual o como otro múltiplo (1x, 2x, 3x, etc.). Esto anula cualquier conjunto de border-width .

  3. Definir el borde-imagen-rebanada :

    En este ejemplo, el grosor de los bordes superiores, derechos, inferiores e izquierdos de las imágenes es 2px, y no hay ningún espacio fuera de ellos, por lo que nuestro valor de corte es 2:

     border-image-slice: 2; 

    Las rebanadas se ven así, a 2 píxeles de la parte superior, derecha, abajo e izquierda:

    Ejemplo de cortes

  4. Definir el borde-imagen-repetir :

    En este ejemplo, queremos que el patrón se repita de manera uniforme alrededor de nuestro div. Así que elegimos:

     border-image-repeat: round; 

Escribir taquigrafía

Las propiedades anteriores se pueden configurar individualmente, o en forma abreviada usando border-image :

 border-image: url("http://i.stack.imgur.com/wLdVc.png") 2 round; 

Ejemplo completo

Tenga en cuenta el border: dashed 4px #000 . Los navegadores no compatibles recibirán este borde.

 .bordered { display: inline-block; padding: 20px; /* Fallback dashed border - the 4px width here is overwritten with the border-image-width (if set) - the border-image-width can be omitted below if it is the same as the 4px here */ border: dashed 4px #000; /* Individual border image properties */ border-image-source: url("http://i.stack.imgur.com/wLdVc.png"); border-image-slice: 2; border-image-repeat: round; /* or use the shorthand border-image */ border-image: url("http://i.stack.imgur.com/wLdVc.png") 2 round; } /*The border image of this one creates wider gaps*/ .largeGaps { border-image-source: url("http://i.stack.imgur.com/LKclP.png"); margin: 0 20px; } 
 
This is bordered!
This is bordered and has larger gaps!

Además de la propiedad de border-image , hay algunas otras maneras de crear un borde discontinuo con control sobre la longitud del trazo y la distancia entre ellos. Se describen a continuación:

Método 1: usar SVG

Podemos crear el borde stroke-dasharray utilizando una path o un elemento de polygon y configurando la propiedad stroke-dasharray . La propiedad toma dos parámetros donde uno define el tamaño del tablero y el otro determina el espacio entre ellos.

Pros:

  1. SVG por naturaleza son gráficos escalables y se pueden adaptar a cualquier dimensión de contenedor.
  2. Puede funcionar muy bien incluso si hay un border-radius involucrado. Simplemente tendríamos que reemplazar el path con un circle como en esta respuesta (o) convertir el path en un círculo.
  3. El soporte del navegador para SVG es bastante bueno y se puede proporcionar una alternativa utilizando VML para IE8-.

Contras:

  1. Cuando las dimensiones del contenedor no cambian proporcionalmente, las rutas tienden a escalar, lo que da como resultado un cambio en el tamaño del tablero y el espacio entre ellas (intente colocar el cursor sobre el primer cuadro del fragmento). Esto puede controlarse agregando vector-effect='non-scaling-stroke' (como en el segundo recuadro) pero el soporte del navegador para esta propiedad es nulo en IE.
 .dashed-vector { position: relative; height: 100px; width: 300px; } svg { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; } path{ fill: none; stroke: blue; stroke-width: 5; stroke-dasharray: 10, 10; } span { position: absolute; top: 0px; left: 0px; padding: 10px; } /* just for demo */ div{ margin-bottom: 10px; transition: all 1s; } div:hover{ height: 100px; width: 400px; } 
 
Some content
Some content

Corto uno: No, no lo es. Deberás trabajar con imágenes en su lugar.