Cómo aumentar el espacio entre los puntos del borde punteado
Estoy usando un borde de estilo punteado en mi cuadro como
.box {
width: 300px;
height: 200px;
border: dotted 1px #f00;
float: left;
}
Quiero aumentar el espacio entre cada punto del borde.
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 del fondo y la proporción con los porcentajes de gradiente lineal. En este ejemplo tengo una línea de puntos de 1 px y un espaciado de 2 px. De esta manera también puedes tener múltiples bordes punteados usando múltiples fondos.
Pruébelo en este JSFiddle o eche un vistazo al ejemplo del fragmento de código:
Mostrar fragmento de código
No puedes hacerlo con CSS puro: la especificación 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 anima a las implementaciones a elegir un espaciado que haga que las esquinas sean simétricas.
Sin embargo, puedes usar una imagen de borde o una imagen de fondo que funcione.
Aquí hay un truco que usé en un proyecto reciente para lograr casi cualquier cosa que quiera con bordes horizontales. Lo 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 quieres tomar el control del borde y, por ejemplo, aumentar el espacio entre puntos, puedes intentar algo como esto:
hr {
height:14px; /* specify a height for this hr */
overflow:hidden;
}
Y a continuación, creas tu borde (aquí tienes un ejemplo con puntos)
hr:after {
content:".......................................................................";
letter-spacing: 4px; /* Use letter-spacing to increase space between dots*/
}
Esto también significa que puedes agregar sombra de texto a los puntos, degradados, etc. Lo que quieras...
Bueno, funciona muy bien para bordes horizontales. Si necesita verticales, puede especificar una clase para otra hora y usar la rotationpropiedad CSS3.
