점선 CSS 테두리의 점 간격을 어떻게 제어할 수 있나요?

점선 테두리의 점 간격 제어

점선 테두리의 점 사이의 간격을 늘리려면 그라데이션 기법을 사용하는 것이 좋습니다. 이 방법은 가로 및 세로 테두리 모두에 적용됩니다.

가로 테두리:

• 배경 이미지를 비율을 지정하는 백분율 값을 사용하여 선형 그라데이션으로 설정합니다. 점으로 채워진 선, 투명도를 위해 0%가 옵니다.
• 점 크기와 배경 크기를 제어하려면 배경 크기를 조정하세요. background-position을 사용하여 테두리 하단에 그라데이션을 배치합니다.

세로 테두리:

• 위와 동일한 선형 그라데이션 기술을 사용하되 변경합니다. 배경 위치를 "오른쪽"으로 설정합니다.

예 코드:

/* 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;

선형 그래디언트의 백분율을 조정하여 점과 간격의 비율을 제어할 수 있습니다. background-size 속성은 도트 크기를 결정합니다.

참고: 이 기술을 사용하면 여러 배경 이미지를 활용하여 여러 점선 테두리를 사용할 수 있습니다.

위 내용은 점선 CSS 테두리의 점 간격을 어떻게 제어할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!