Controlar la longitud de la carrera borde punteado y la distancia entre los golpes

Question

Es posible el control de la longitud y la distancia entre los golpes borde punteado en CSS?

Este ejemplo de abajo muestra de forma diferente entre los navegadores:

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

<div>I have a dashed border!</div>

Las grandes diferencias: es decir, 11 / Firefox / Chrome

¿Existen métodos que pueden proporcionar un mayor control de la aparición de las fronteras frustradas?

Answer 1

Css render es específico del navegador y no sé cualquier ajuste fino en él, usted debe trabajar con imágenes según lo recomendado por el jamón. Referencia: http://www.w3.org/TR/CSS2 /box.html#border-style-properties

Answer 2

El valor de la propiedad borde punteado nativa no ofrece control sobre los propios guiones ... así que trae en la propiedad border-image!

Brew su propio frontera con border-image

Compatibilidad : Ofrece gran apoyo navegador href="http://caniuse.com/#feat=border-image"> (IE 11 y todos los navegadores modernos) . Un borde de la normalidad se puede configurar como un mensaje para los navegadores antiguos.

Vamos a crear estos

Estas fronteras mostrará exactamente la misma entre navegadores!

Paso 1 - Crear una imagen adecuada

Este ejemplo es de 15 píxeles de ancho por 15 pixeles de alto y los huecos son actualmente 5px ancho. Es un .png con transparencia.

Esto es lo que parece en photoshop cuando se acerca:

Esto es lo que parece a escala:

Control de hueco y longitud de carrera

Para crear espacios más anchos / más cortos o accidentes cerebrovasculares, ampliar / acortar las brechas o golpes en la imagen.

Esta es una imagen con amplios huecos 10px:

correctamente escalado =

Paso 2 - Crear el CSS - este ejemplo requiere 4 pasos básicos

1. -imagen-fuente :

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

2. opcional - Definir la frontera href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-width"> :

   border-image-width: 1;
   

   El valor por defecto es 1. También se puede configurar con un valor de píxeles, porcentaje o como otro múltiple (1x, 2x, 3x, etc). Esto anula cualquier conjunto border-width.

3. -imagen-rebanada :

   En este ejemplo, el espesor de la parte superior imágenes, derecha, abajo y bordes izquierdo es 2px, y no hay ninguna brecha fuera de ellos, por lo que nuestro valor de corte es de 2:

   border-image-slice: 2; 
   

   Las rodajas se parecen a esto, 2 píxeles desde la parte superior, derecha, abajo y de izquierda:

   

4. -imagen-repetición :

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

   border-image-repeat: round;
   

escritura abreviada

Las propiedades anteriormente se puede ajustar individualmente, o en forma abreviada utilizando :

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

Ejemplo completo

Tenga en cuenta el repliegue border: dashed 4px #000. No apoyar a los navegadores recibirá esta frontera.

.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;
}

<div class="bordered">This is bordered!</div>

<div class="bordered largeGaps">This is bordered and has larger gaps!</div>

Answer 3

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

Método 1: Utilizar SVG

puede crear el borde discontinuo mediante el uso de un path o un elemento polygon y ajuste de la stroke-dasharray propiedad. La propiedad tiene dos parámetros donde uno define el tamaño del tablero de instrumentos y el otro determina el espacio entre ellos.

Pros:

1. IVS por naturaleza son gráficos escalable y puede adaptarse a cualquier dimensión del recipiente.
2. Puede funcionar muy bien, incluso si hay un border-radius involucrados. Nos gustaría simplemente tener sustituir el path con un circle como en esta respuesta (o) convertir el path en un círculo.
3. Compatibilidad con navegadores para SVG es bastante bueno y de reserva se puede realizar utilizando VML para IE8- .

Contras:

1. Cuando las dimensiones del recipiente no cambian proporcionalmente, los caminos tienden a escala que resulta en un cambio en el tamaño del tablero de instrumentos y el espacio entre ellos (prueba flotando en la primera caja en el fragmento). Esto puede ser controlado mediante la adición de vector-effect='non-scaling-stroke' (como en el segundo cuadro), pero el soporte de los navegadores de esta propiedad es nula en el 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;
}

<div class='dashed-vector'>
  <svg viewBox='0 0 300 100' preserveAspectRatio='none'>
    <path d='M0,0 300,0 300,100 0,100z' />
  </svg>
  <span>Some content</span>
</div>

<div class='dashed-vector'>
  <svg viewBox='0 0 300 100' preserveAspectRatio='none'>
    <path d='M0,0 300,0 300,100 0,100z' vector-effect='non-scaling-stroke'/>
  </svg>
  <span>Some content</span>
</div>

---

Método 2: utilizando gradientes

Podemos utilizar varias imágenes y posición de fondo linear-gradient de manera apropiada para crear un efecto de borde punteado. Esto también se puede hacer con un repeating-linear-gradient pero no hay mucha mejora debido al uso de un gradiente de repetición, ya que necesitamos cada gradiente de repetir en una sola dirección.

.dashed-gradient{
  height: 100px;
  width: 200px;
  padding: 10px;
  background-image: linear-gradient(to right, blue 50%, transparent 50%), linear-gradient(to right, blue 50%, transparent 50%), linear-gradient(to bottom, blue 50%, transparent 50%), linear-gradient(to bottom, blue 50%, transparent 50%);
  background-position: left top, left bottom, left top, right top;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 20px 3px, 20px 3px, 3px 20px, 3px 20px;
}

.dashed-repeating-gradient {
  height: 100px;
  width: 200px;
  padding: 10px;
  background-image: repeating-linear-gradient(to right, blue 0%, blue 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to right, blue 0%, blue 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, blue 0%, blue 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, blue 0%, blue 50%, transparent 50%, transparent 100%);
  background-position: left top, left bottom, left top, right top;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 20px 3px, 20px 3px, 3px 20px, 3px 20px;
}

/* just for demo */

div {
  margin: 10px;
  transition: all 1s;
}
div:hover {
  height: 150px;
  width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='dashed-gradient'>Some content</div>
<div class='dashed-repeating-gradient'>Some content</div>

Pros:

1. escalable y puede adaptarse incluso si las dimensiones del contenedor son dinámicas.
2. no hace uso de ningún pseudo-elementos adicionales que significa que pueden mantenerse a un lado para cualquier otro uso potencial.

Contras:

1. Compatibilidad con navegadores para gradientes lineales es comparativamente más bajos y esto es un no-go si querer apoyar IE 9. Incluso las bibliotecas como CSS3 PIE no son compatibles con la creación de patrones de degradado en IE8 -.
2. No se puede utilizar cuando border-radius está involucrado porque los fondos no lo hacen curva basada en border-radius. Ellos se recortan en su lugar.

---

Método 3: Caja de sombras

podemos crear un pequeño bar (en la forma de la rociada) usando pseudo-elementos y luego crear varias versiones box-shadow de la misma para crear un borde como en el siguiente fragmento.

Si el guión es una forma cuadrada entonces una sola pseudo-elemento sería suficiente, pero si se trata de un rectángulo, necesitaríamos un pseudo-elemento de los top + bordes inferior y otro para bordes izquierdo +. Esto es debido a que la altura y la anchura de la raya en el borde superior será diferente de la de la izquierda.

Pros:

1. Las dimensiones del tablero es controlable cambiando las dimensiones de la pseudo-elemento. El espaciado es controlable mediante la modificación del espacioentre cada sombra.
2. Un efecto muy singular puede ser producido por la adición de un color diferente para cada sombra caja.

Contras:

1. Ya que tenemos que configurar manualmente las dimensiones del tablero y el espacio, este enfoque no es bueno cuando las dimensiones de la caja padre es dinámica.
2. IE8 e inferiores no apoyo caja de sombra. Sin embargo, esto se puede superar mediante el uso de las bibliotecas como CSS3 PIE.
3. Puede ser utilizado con border-radius pero el posicionamiento de ellos sería muy difícil de tener que encontrar puntos en un círculo (y posiblemente incluso transform).

.dashed-box-shadow{
  position: relative;
  height: 120px;
  width: 120px;
  padding: 10px;
}
.dashed-box-shadow:before{ /* for border top and bottom */
  position: absolute;
  content: '';
  top: 0px;
  left: 0px;
  height: 3px; /* height of the border top and bottom */
  width: 10px; /* width of the border top and bottom */
  background: blue; /* border color */
  box-shadow: 20px 0px 0px blue, 40px 0px 0px blue, 60px 0px 0px blue, 80px 0px 0px blue, 100px 0px 0px blue, /* top border */
    0px 110px 0px blue, 20px 110px 0px blue, 40px 110px 0px blue, 60px 110px 0px blue, 80px 110px 0px blue, 100px 110px 0px blue; /* bottom border */
}
.dashed-box-shadow:after{ /* for border left and right */
  position: absolute;
  content: '';
  top: 0px;
  left: 0px;
  height: 10px; /* height of the border left and right */
  width: 3px; /* width of the border left and right */
  background: blue; /* border color */
  box-shadow: 0px 20px 0px blue, 0px 40px 0px blue, 0px 60px 0px blue, 0px 80px 0px blue, 0px 100px 0px blue, /* left border */
    110px 0px 0px blue, 110px 20px 0px blue, 110px 40px 0px blue, 110px 60px 0px blue, 110px 80px 0px blue, 110px 100px 0px blue; /* right border */
}

<div class='dashed-box-shadow'>Some content</div>

Answer 4

Corto uno: No, no lo es. Tendrá que trabajar con imágenes en lugar.