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

estilos para div css

Question

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

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

Grandes diferencias: IE 11 / Firefox / Chrome

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

Answer 1

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

<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: usar gradientes

Podemos usar múltiples imágenes de fondo de linear-gradient manera apropiada para crear un efecto de borde discontinuo. Esto también se puede hacer con un repeating-linear-gradient pero no hay mucha mejoría debido al uso de un gradiente repetitivo ya que necesitamos que cada gradiente se repita 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 utiliza ningún pseudoelemento adicional, lo que significa que puede mantenerse a un lado para cualquier otro uso potencial.

Contras:

1. El soporte del navegador para degradados lineales es comparativamente más bajo y esto es un no-go si quieres soportar IE 9-. Incluso bibliotecas como CSS3 PIE no son compatibles con la creación de patrones de degradado en IE8-.
2. No se puede usar cuando se trata de border-radius porque los fondos no se curvan según el border-radius . Ellos son recortados en su lugar.

Método 3: Sombras de caja

Podemos crear una pequeña barra (en forma de guión) utilizando pseudo-elementos y luego crear múltiples versiones de box-shadow para crear un borde como en el siguiente fragmento.

Si el tablero es una forma cuadrada, entonces un solo pseudo-elemento sería suficiente, pero si es un rectángulo, necesitaríamos un pseudo-elemento para los bordes superiores e inferiores y otro para los bordes izquierdo y derecho. Esto se debe a que la altura y el ancho del tablero en el borde superior serán diferentes de los de la izquierda.

Pros:

1. Las dimensiones del tablero se pueden controlar cambiando las dimensiones del pseudo-elemento. El espaciado se puede controlar modificando el espacio entre cada sombra.
2. Se puede producir un efecto único añadiendo un color diferente para cada sombra de cuadro.

Contras:

1. Como tenemos que establecer manualmente las dimensiones del guión y el espaciado, este enfoque no es bueno cuando las dimensiones del cuadro principal son dinámicas.
2. IE8 e inferior no son compatibles con la sombra de cuadro . Sin embargo, esto puede superarse mediante el uso de bibliotecas como CSS3 PIE.
3. Se puede usar con border-radius pero posicionarlos sería muy complicado al 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 2

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

Answer 3

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

Answer 4

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!

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:

Esto es lo que parece escalar:

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:

correctamente escalado =

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 border-image-width :

   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 border-image-slice :

   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:

4. Definir el border-image-repeat :

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

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

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