CSS를 사용하여 제어 가능한 점선을 생성하는 방법

목적:

아래 그림과 같이 점선을 생성합니다

구현 방법

구현 방법, 어떤 사람들은 여러 스팬을 사용하여 생성합니다. 작은 점이 스팬입니다. 가능하지만 전체 상태를 변경하는 것은 번거로운 일입니다. 제어 가능한 점선을 생성할 수 있는 방법이 있습니까?

(추천 동영상 튜토리얼: css 동영상 튜토리얼)

점선 생성

수평선 생성

점선 생성. 일반적으로 선형 그라데이션 + 배경 크기를 통해 구현됩니다. 다음과 같습니다:

height: 2px;
background: linear-gradient(to right, #000000, #000000 7.5px, transparent 7.5px, transparent);
background-size: 15px 100%;

height, 점선 높이 제어, 선형 그라데이션 및 배경 크기 간격 및 단계 크기 제어

수직선 생성

수직선과 수평선은 정확히 반대입니다. 그들을.

width: 2px;
background: linear-gradient(to bottom, #000000, #000000 7.5px, transparent 7.5px, transparent);
background-size: 100% 15px;

추천 튜토리얼: css 빠른 시작

위 내용은 CSS를 사용하여 제어 가능한 점선을 생성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!