CSS Checkerboard 배경 ...하지만 둥근 모서리와 호버 스타일

CSS로 간단한 체크 무늬 배경을 만드는 것은 간단합니다. 그러나 복잡한 CSS 그라디언트에 의지하지 않고 둥근 모서리를 달성하는 것은 어려울 수 있습니다. 이 기사는 SVG Glyphs와 함께 영리한 트릭을 사용하여 창의적인 솔루션을 제시합니다.

처음에, 나는 기본 체크 무늬 패턴의 모서리를 반올림하기 위해 고군분투했습니다. 그런 다음, 나는 총알 포인트 글리프 (✦)의 다양성을 기억하고 각 교차로에서 그것을 오버레이하면 원하는 둥근 효과를 만들 수 있음을 깨달았습니다.

기본 체크 무늬 패턴부터 시작하겠습니다.

<div></div>

 div {
  배경: 
    반복적 인 등간 등급 (
      오른쪽, 투명, 
      투명한 50px, 
      흰색 50px, 
      흰색 55px
    ),)
    반복적 인 등간 등급 (
      바닥, 투명,  
      투명한 50px, 
      흰색 50px, 
      흰색 55px
    ),)
    선형 그레이드 (45deg, 핑크, 스카이 블루);
  / * 더 많은 스타일 */
}

이 코드는 5px 흰색 간격으로 분홍색에서 스카이 블루로 전환되는 반복적 인 사각형 패턴을 생성합니다. repeating-linear-gradient 함수는 수평 및 수직 흰색 줄무늬를 생성하며, 이는 계층화 될 때 바둑판을 형성합니다. 세 번째 그라디언트는 색상 채우기를 제공합니다.

둥근 모서리를 추가하기 위해 인코딩 된 SVG를 사용하여 총알 포인트 글리프를 오버레이합니다.

 div {
  배경: 
    왼쪽 -17px 상단 -22px/55px 55px를 반복하십시오
    URL ( "데이터 : image/svg xml, <svg viewbox="0 0 35px 35px" xmlns="http://www.w3.org/2000/svg"><foreignobject height="35px" width="35px"><div style="color: white; font-size: 35px" xmlns="http://www.w3.org/1999/xhtml"> ✦</div></foreignobject></svg> "), 
    반복적 인 등간 등급 (
      오른쪽, 투명,
      투명한 50px,
      흰색 50px,
      흰색 55px
    ),)
    반복적 인 등간 등급 (
      바닥, 투명,
      투명한 50px,
      흰색 50px,
      흰색 55px
    ),)
    선형 그레이드 (45deg, 핑크, 스카이 블루);
  / * 더 많은 스타일 */
}

repeat 키워드는 반복되는 배경 이미지를 나타냅니다. left -17px top -22px/55px 55px 각각의 반복 장치의 위치와 크기를 설정하고 그리드 교차로와 정렬하기 위해 신중하게 오프셋됩니다. SVG에는 HTML이 포함되어 있습니다<div> 글리프를 표시하는 요소; <code>font-size 는 제곱의 모서리 반경에 직접 영향을 미칩니다. 확장 된 SVG는 다음과 같습니다.

<svg viewbox="0 0 35px 35px" xmlns="http://www.w3.org/2000/svg"><foreignobject height="35px" width="35px"><div style="color:white;font-size:35px" xmlns="http://www.w3.org/1999/xhtml"> ✦</div></foreignobject></svg>

마지막으로 호버 효과를 추가하겠습니다.

 div : 호버 {
  배경:
    반복적 인 등간 등급 (
      오른쪽, 투명,
      투명한 50px,
      RGB (255 255 255 / 0.5) 50px,
      RGB (255 255 255 / 0.5) 55px
    ),)
    반복적 인 등간 등급 (
      바닥, 투명,
      투명한 50px,
      RGB (255 255 255 / 0.5) 50px,
      RGB (255 255 255 / 0.5) 55px
    ),)
    선형 그레이드 (45deg, 핑크, 스카이 블루);
  Box-Shadow : 10px 10px 20px 핑크;
}

이것은 호버의 글리프를 제거하고 알파 투명도와 함께 rgb() 사용하여 흰색 선을 반 트랜스 파트로 만듭니다. box-shadow 미묘한 효과를 더합니다.

이 기술은 CSS로 둥근 코너 체커 보드 패턴을 달성하는 창의적이고 효과적인 방법을 제공하여 다양한 대화식 스타일에 유연성을 제공합니다. 나는 의견에서 대체 접근법을 환영합니다!

위 내용은 CSS Checkerboard 배경 ...하지만 둥근 모서리와 호버 스타일의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!