CSS 만 사용하여 업로드 버튼의 멋진 점선 효과를 만드는 방법은 무엇입니까?

순수한 CSS는 업로드 버튼의 멋진 점선 효과를 만듭니다! 사진과 JavaScript에 작별 인사를하면 CSS 코드로 만 달성 할 수 있습니다! 이 기사에서는 CSS 선형 그라디언트를 사용하여 고유 한 업로드 버튼 스타일을 만드는 방법을 보여줍니다. 효과는 예제 이미지에 표시됩니다.

많은 개발자들이 업로드 버튼에 대한 더 매력적인 모양을 설계하기를 원합니다. 전통적인 방법은 일반적으로 이미지 또는 복잡한 JavaScript 코드에 의존하지만 실제로 CSS의 linear-gradient 속성을 영리하게 적용하여 유사한 효과를 쉽게 달성 할 수 있습니다.

비밀은 두 개의 선형 그라디언트를 능숙하게 중첩시키는 것입니다. 그라디언트 방향, 크기 및 반복을 조정함으로써 점선 프레임의 시각적 효과를 시뮬레이션 할 수 있습니다. 다음 CSS 코드는 특정 구현을 보여줍니다.

 라벨 {
  디스플레이 : 블록;
  너비 : 80px;
  높이 : 80px;
  국경 : 1px 점선 #ccc;
  배경 : 선형 그레이드 (#CCC, #CCC) 센터/40px 4px No-Repeat,
              Linear-Gradient (#CCC, #CCC) 센터/4px 40px No-Repeat;
}

코드 해석 :

• width 와 height 속성은 버튼 크기를 정의합니다.
• border 속성은 점선 테두리를 설정합니다.
• background 속성은 핵심으로 두 개의 선형 그라디언트를 중첩시킵니다.
  • linear-gradient(#ccc, #ccc) center/40px 4px no-repeat : 수평 방향으로 짧은 점선을 만듭니다.
  • linear-gradient(#ccc, #ccc) center/4px 40px no-repeat : 수직 방향으로 짧은 점선을 만듭니다. 두 가지 결합하여 그리드와 같은 점선 프레임을 형성합니다.
  • center/40px 4px 및 center/4px 40px 그라디언트의 크기 및 위치를 제어하여 점선의 길이와 간격을 정확하게 제어합니다.

버튼 크기와 모양을 사용자 정의하는 데 필요한 경우 width , height 및 색상 값 (예 : #ccc )을 조정할 수 있습니다. linear-gradient 매개 변수를 수정하면 점선의 두께 및 간격 조정과 같은 점선 효과를 추가로 미세 조정할 수 있습니다.

위 내용은 CSS 만 사용하여 업로드 버튼의 멋진 점선 효과를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!