Explicación detallada de 3 formas de lograr el efecto de línea de puntos en CSS

1. Efecto

Primero, puede observar el efecto de implementación que se muestra en la siguiente figura:

• El efecto de línea de puntos se logra de tres maneras: haga clic para ver el código de demostración

2. Realización

1. atributo de borde

Mirando el borde de mdn , sabemos borderque se puede usar para establecer el valor de una o más de las siguientes propiedades: border-width, border-style, border-color.

border-stylePuede configurar el estilo del borde usando para dashedconfigurar el efecto de línea de puntos.

Código de implementación:

Establecer el estilo de div

.box {height: 100px;line-height: 100px;margin-bottom: 20px;
} 

<div className="box line1">虚线1</div> 

Úselo borderpara implementar:

/*虚线1 css*/
.line1 {border: 1px dashed red;
} 

2. Utilice el fondo y el degradado lineal con habilidad

Mi último artículo "Configuración CSS del efecto de degradado de color del borde del borde" introdujo en detalle el uso de gradiente lineal . Los estudiantes que no estén seguros pueden aprenderlo primero.

Veamos primero el código de implementación:

<div className="box line2">虚线2</div> 

/*虚线2 css*/
.line2 {background: linear-gradient(to left,transparent 0%,transparent 50%,#ccc 50%,#ccc 100%);background-size: 10px 1px;background-repeat: repeat-x;
} 

Desmontemos el CSS y echémosle un vistazo:

1) Establece el fondo primero

El atributo de fondo es un atributo abreviado que puede definir uno o más atributos en una declaración: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-sizey background-attachment.

background: linear-gradient(to left,/*to结束的方向*/transparent 0%,transparent 50%,#ccc 50%,#ccc 100%
); 

linear-gradient()Función utilizada para crear una imagen que representa un degradado lineal de dos o más colores. El resultado pertenece al <gradient>tipo de datos, que es un <image>tipo de datos especial.

Este CSS significa:

• to lefta representa la dirección final, por lo que aquí representa un gradiente de derecha a izquierda.
• transparent 0%,transparent 50%,Desde la posición del 0% hasta la posición del 50%, es transparente.
• #ccc 50%,#ccc 100%Comenzando desde la posición 50% hasta la posición 100%, está el color #ccc.
• De hecho, se puede entender que la configuración es equivalente abackground-image

El efecto es el siguiente:

2) Luego establece el tamaño del fondo.

background-size: 10px 1px; 

Establezca el tamaño de la imagen de fondo en: ancho 10 px y alto 1 px. El efecto se convierte en el siguiente:

¿Por qué es esto?

Debido a que en el paso anterior configuramos linear-gradientel atributo punto de gradiente como un porcentaje, se verá afectado por background-size. De hecho, el ancho de cada "gris" es 10 px. La razón por la cual la altura parece muy larga es por background-repeat.

Y el valor predeterminado backgrounden la propiedad es (la imagen de fondo se repetirá tanto vertical como horizontalmente). Entonces lo que ves es el efecto anterior. ¿Cómo obtener la línea discontinua?background-repeatrepeat

3) Establecer repetición de fondo

background-repeat: repeat-x; /*背景图像将在水平方向重复。*/ 

Luego obtenemos la línea discontinua:

Debido a que en la configuración anterior background-size, la altura es 1px, luego en la dirección x (horizontal), se repetirá de acuerdo con 1px. Luego obtienes la línea discontinua. Si lo configuramos background-size: 10px 10px, el efecto de repetir en la dirección x es el siguiente:

De esta manera, la línea de puntos que implementamos puede ajustar el espaciado y la altura de la línea de puntos según sea necesario.

3. Utilice el clip de fondo con habilidad

De hecho, la idea es muy similar al método anterior.

Veamos primero el código de implementación:

<div className="box line3">虚线3</div> 

/*虚线3 css*/
.line3 {border: 1px solid transparent;background: linear-gradient(white, white) padding-box,repeating-linear-gradient(-45deg,#e5e5e5 0,#e5e5e5 3px,white 0,white 5px);
} 

Todavía desmontemos el CSS y echémosle un vistazo:

1) Establece el fondo primero

background: linear-gradient(white, white) padding-box,repeating-linear-gradient(-45deg,#ccc 0,#ccc 3px,white 0,white 5px); 

• Primero, linear-gradient(white, white)significa que el degradado es blanco de arriba a abajo de forma predeterminada.
• padding-boxEs backgroundel atributo intermedio background-clip, que se utiliza para establecer si el fondo (imagen de fondo o color) del elemento establecido se extiende por debajo del borde, el cuadro de relleno y el cuadro de contenido.
• Nota: El valor predeterminado es border-box;el siguiente:

Para distinguirlo del color de fondo, configuré un fondo gris, por lo que el efecto del primer paso es el siguiente:

• Luego configure repeating-linear-gradient, aquí para lograr un efecto de gradiente repetitivo lineal, * El eje del gradiente es -45 grados, gradiente desde la esquina inferior derecha hasta la esquina superior izquierda * La posición de 0 a 3px es el color de #ccc * La posición desde 0 a 5px Es blanco* De esta manera puede obtener un efecto repetido con un ancho gris de 3px y un intervalo de blanco de 2px (puede establecer el ancho y el espaciado de las líneas de puntos aquí según sea necesario)* Tenga en cuenta que el valor predeterminado aquí es en background-cliprealidadborder-box

El efecto se muestra en la siguiente figura:

linear-gradientLos y configurados aquí repeating-linear-gradientequivalen a configurar dos imágenes de fondo. Las configuraciones posteriores se sobrescribirán con las configuraciones anteriores. Entonces, lo que vemos después de configurar el efecto es en realidad blanco:

Entonces, ¿cómo obtenemos la línea discontinua?

2) Establecer borde

border: 1px solid transparent; /*设置透明边框*/ 

Recuerda lo que dijimos arriba background-clip, de hecho, se usa aquí.

background-clip: border-box; /*背景延伸至边框外沿（但是在边框下层）*/
background-clip: padding-box; /*背景延伸至内边距 padding 外沿。不会绘制到边框处。*/ 

La diferencia entre estas dos propiedades es exactamente la diferencia entre las características del borde y el efecto de línea de puntos.

Si solo queremos mostrar un lado, podemos establecer la altura del cuadro div más pequeña y luego establecer solo un lado del borde, por ejemplo:

/*只设置一个边*/
.line3 {height: 2px;border-top: 1px solid transparent;background: linear-gradient(white, white) padding-box,repeating-linear-gradient(-45deg, #ccc 0, #ccc 3px, white 0, white 5px);
} 

En resumen, hemos implementado el borde de puntos de tres formas, ¿lo has aprendido?

por fin

Para los estudiantes que nunca han estado expuestos a la seguridad de la red, hemos preparado una hoja de ruta detallada de aprendizaje y crecimiento para ustedes. Se puede decir que es la ruta de aprendizaje más científica y sistemática, y no será ningún problema para todos seguir esta dirección general.

Al mismo tiempo, se proporcionan videos de apoyo para cada sección correspondiente a la ruta de crecimiento:


por supuesto, además de los videos de apoyo, también se han clasificado varios documentos, libros, materiales y herramientas para todos, y se han dividido en categorías para todos.

Debido al espacio limitado, solo se muestra parte de la información. Los amigos que lo necesiten pueden [haga clic en la tarjeta a continuación] para obtenerla gratis: