html - ejemplos - double border css

Cómo aumentar el espacio entre puntos de borde punteado

Question

Estoy usando un borde de estilo de puntos en mi caja como

.box {
    width: 300px;
    height: 200px;
    border: dotted 1px #f00;
    float: left;
}

Quiero aumentar el espacio entre cada punto del borde.

Answer 1

AFAIK no hay una manera de hacer esto. Podría usar un borde discontinuo o tal vez aumentar un poco el ancho del borde, pero con CSS es imposible obtener más puntos espaciados.

Answer 2

Aquí hay un truco que he usado en un proyecto reciente para lograr casi todo lo que quiero con bordes horizontales. Uso <hr/> cada vez que necesito un borde horizontal. La forma básica de agregar un borde a esta hora es algo como

 hr {border-bottom: 1px dotted #000;}

Pero si desea tomar el control del borde y, por ejemplo, aumentar el espacio entre puntos, puede intentar algo como esto:

hr {
height:14px; /* specify a height for this hr */
overflow:hidden;
}

Y a continuación, creas tu borde (aquí hay un ejemplo con puntos)

hr:after {
content:".......................................................................";
letter-spacing: 4px; /* Use letter-spacing to increase space between dots*/
}

Esto también significa que puede agregar sombra de texto a los puntos, gradientes, etc. Cualquier cosa que desee ...

Bueno, funciona realmente genial para los bordes horizontales. Si necesita verticales, puede especificar una clase para otra hora y usar la propiedad de rotation CSS3.

Answer 3

Así que, comenzando con la respuesta dada y aplicando el hecho de que CSS3 permite múltiples configuraciones, el siguiente código es útil para crear un cuadro completo:

#border {
  width: 200px;
  height: 100px;
  background: yellow;
  text-align: center;
  line-height: 100px;
  background: linear-gradient(to right, orange 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(blue 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(to right, green 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(red 50%, rgba(255, 255, 255, 0) 0%);
  background-position: top, right, bottom, left;
  background-repeat: repeat-x, repeat-y;
  background-size: 10px 1px, 1px 10px;
}

<div id="border">
  bordered area
</div>

Vale la pena señalar que el tamaño de fondo de 10 px proporciona el área que el guión y la separación cubrirán. El 50% de la etiqueta de fondo es el ancho del tablero. Por lo tanto, es posible tener guiones de diferente longitud en cada lado del borde.

Answer 4

Consulte los documentos de MDN para conocer los valores disponibles para border-style :

• ninguno: sin borde, establece el ancho a 0. Este es el valor predeterminado.
• oculto: igual que ''ninguno'', excepto en términos de resolución de conflictos de borde para elementos de tabla.
• discontinuo: Serie de guiones cortos o segmentos de línea.
• punteado: serie de puntos.
• doble: dos líneas rectas que suman la cantidad de píxeles definida como ancho de borde.
• ranura: efecto tallado.
• recuadro: Hace que el cuadro aparezca incrustado.
• principio: opuesto a ''inserción''. Hace que la caja aparezca en 3D (en relieve).
• cresta: opuesta a ''groove''. El borde aparece en 3D (saliendo).
• Sólido: Línea simple, recta, continua.

Aparte de esas opciones, no hay manera de influir en el estilo del borde estándar.

Si las posibilidades no son de su agrado, podría usar la border-image de border-image de CSS3 pero tenga en cuenta que el soporte del navegador para esto todavía es muy irregular.

Answer 5

Esta es una pregunta muy antigua, pero tiene un alto rango en Google, así que voy a incluir mi método que podría funcionar según sus necesidades.

En mi caso, quería un borde grueso discontinuo que tuviera una ruptura mínima entre los guiones. Utilicé un generador de patrones CSS (como este: http://www.patternify.com/ ) para crear un patrón de 10px de ancho por 1px de altura. 9px de eso es color de guión sólido, 1px es blanco.

En mi CSS, incluí ese patrón como imagen de fondo, y luego lo amplié usando el atributo de tamaño de fondo. Terminé con un guión repetido de 20px por 2px, 18px de esa línea continua y 2px de color blanco. Se podría escalar aún más para una línea discontinua muy gruesa.

Lo bueno es que la imagen está codificada como datos que no tiene la solicitud HTTP externa adicional, por lo que no hay carga de rendimiento. Guardé mi imagen como una variable SASS para poder reutilizarla en mi sitio.

Answer 6

Este truco funciona tanto para bordes horizontales como verticales:

/*Horizontal*/
background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 3px 1px;
background-repeat: repeat-x;

/*Vertical*/
background-image: linear-gradient(black 33%, rgba(255,255,255,0) 0%);
background-position: right;
background-size: 1px 3px;
background-repeat: repeat-y;

Puede ajustar el tamaño con el tamaño de fondo y la proporción con los porcentajes de gradiente lineal. En este ejemplo tengo una línea de puntos de puntos de 1px y espaciado de 2px. De esta manera también puede tener múltiples bordes punteados utilizando múltiples fondos.

Pruébelo en este JSFiddle o eche un vistazo al ejemplo del fragmento de código:

div {
  padding: 10px 50px;
}
.dotted {
  border-top: 1px #333 dotted;
}
.dotted-gradient {
  background-image: linear-gradient(to right, #333 40%, rgba(255, 255, 255, 0) 20%);
  background-position: top;
  background-size: 3px 1px;
  background-repeat: repeat-x;
}
.dotted-spaced {
  background-image: linear-gradient(to right, #333 10%, rgba(255, 255, 255, 0) 0%);
  background-position: top;
  background-size: 10px 1px;
  background-repeat: repeat-x;
}
.left {
  float: left;
  padding: 40px 10px;
  background-color: #F0F0DA;
}
.left.dotted {
  border-left: 1px #333 dotted;
  border-top: none;
}
.left.dotted-gradient {
  background-image: linear-gradient(to bottom, #333 40%, rgba(255, 255, 255, 0) 20%);
  background-position: left;
  background-size: 1px 3px;
  background-repeat: repeat-y;
}
.left.dotted-spaced {
  background-image: linear-gradient(to bottom, #333 10%, rgba(255, 255, 255, 0) 0%);
  background-position: left;
  background-size: 1px 10px;
  background-repeat: repeat-y;
}

<div>no
  <br>border</div>
<div class=''dotted''>dotted
  <br>border</div>
<div class=''dotted-gradient''>dotted
  <br>with gradient</div>
<div class=''dotted-spaced''>dotted
  <br>spaced</div>

<div class=''left''>no
  <br>border</div>
<div class=''dotted left''>dotted
  <br>border</div>
<div class=''dotted-gradient left''>dotted
  <br>with gradient</div>
<div class=''dotted-spaced left''>dotted
  <br>spaced</div>

Answer 7

Esto utiliza el borde estándar de CSS y un pseudo elemento + desbordamiento: oculto. En el ejemplo, obtienes tres bordes discontinuos de 2px diferentes: normal, espaciados como un 5px, espaciados como un 10px. Es en realidad 10px con solo 10-8 = 2px visible.

div.two{border:2px dashed #FF0000}

div.five:before {
  content: "";
  position: absolute;
  border: 5px dashed #FF0000;
  top: -3px;
  bottom: -3px;
  left: -3px;
  right: -3px;
}

div.ten:before {
  content: "";
  position: absolute;
  border: 10px dashed #FF0000;
  top: -8px;
  bottom: -8px;
  left: -8px;
  right: -8px;
}

div.odd:before {left:0;right:0;border-radius:60px}

div {
  overflow: hidden;
  position: relative;


  text-align:center;
  padding:10px;
  margin-bottom:20px;
}

<div class="two">Kupo nuts here</div>
<div class="five">Kupo nuts<br/>here</div>
<div class="ten">Kupo<br/>nuts<br/>here</div>
<div class="ten odd">Kupo<br/>nuts<br/>here</div>

Aplicado a elementos pequeños con grandes esquinas redondeadas puede generar algunos efectos divertidos.

Answer 8

Mucha gente dice "No puedes". Sí tu puedes. Es cierto que no hay una regla de css para controlar el espacio entre los guiones, pero css tiene otras habilidades. No seas tan rápido para decir que una cosa no se puede hacer.

.hr {
    border-top: 5px dashed #CFCBCC;
    margin: 30px 0;
    position: relative;
}

.hr:before {
    background-color: #FFFFFF;
    content: "";
    height: 10px;
    position: absolute;
    top: -2px;
    width: 100%;
}

.hr:after {
    background-color: #FFFFFF;
    content: "";
    height: 10px;
    position: absolute;
    top: -13px;
    width: 100%;
}

Básicamente, la altura del borde superior (5px en este caso) es la regla que determina el "ancho" del canal. Por supuesto, deberías ajustar los colores para que se ajusten a tus necesidades. Este también es un pequeño ejemplo de una línea horizontal, use izquierda y derecha para hacer la línea vertical.

Answer 9

No puede hacerlo con CSS puro: la especificación de CSS3 incluso tiene una cita específica sobre esto:

Nota: No hay control sobre el espaciado de los puntos y guiones, ni sobre la longitud de los guiones. Se recomienda a las implementaciones que elijan un espaciado que haga que las esquinas sean simétricas.

Sin embargo, puede usar una imagen de borde o una imagen de fondo que haga el truco.

Answer 10

Puede crear un lienzo (a través de javascript) y dibujar una línea de puntos dentro. Dentro del lienzo, puedes controlar la duración del guión y el espacio intermedio.

Answer 11

Respuesta corta: No puedes.

Tendrá que usar la propiedad de border-image y algunas imágenes.

Answer 12

Si solo te diriges a los navegadores modernos, Y puedes tener tu borde en un elemento separado de tu contenido, entonces puedes usar la transformación de la escala CSS para obtener un punto o guión más grande:

border: 1px dashed black;
border-radius: 10px;
-webkit-transform: scale(8);
transform: scale(8);

Se requieren muchos ajustes posicionales para alinearlo, pero funciona. Al cambiar el grosor del borde, el tamaño inicial y el factor de escala, puede obtener la relación grosor-longitud que desee. Lo único que no puedes tocar es la proporción de tablero a espacio.

Answer 13

Solución de 4 bordes de construcción basada en la respuesta de @ Eagorajose con sintaxis abreviada:

background: linear-gradient(to right, #000 33%, #fff 0%) top/10px 1px repeat-x, /* top */
linear-gradient(#000 33%, #fff 0%) right/1px 10px repeat-y, /* right */
linear-gradient(to right, #000 33%, #fff 0%) bottom/10px 1px repeat-x, /* bottom */
linear-gradient(#000 33%, #fff 0%) left/1px 10px repeat-y; /* left */

#page {
    background: linear-gradient(to right, #000 33%, #fff 0%) top/10px 1px repeat-x, /* top */
    linear-gradient(#000 33%, #fff 0%) right/1px 10px repeat-y, /* right */
    linear-gradient(to right, #000 33%, #fff 0%) bottom/10px 1px repeat-x, /* bottom */
    linear-gradient(#000 33%, #fff 0%) left/1px 10px repeat-y; /* left */
    
    width: 100px;
    height: 100px;
}

<div id="page"></div>