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

CS를 직접 작성하는 것이 직선적입니다. 그러나 복잡한 CSS 그라디언트에 의지하지 않고 둥근 모서리를 달성하는 것은 어려울 수 있습니다. 이 기사는 SVG Glyphs와 함께 영리한 속임수를 사용하여 창의적인 솔루션을 제시합니다.

처음에는 기본 체커 패턴의 모서리를 반올림하는 데 어려움을 겪었습니다. 그런 다음 총알 포인트 글리프 (✦)의 다양성을 기억하고 각 교차로에서 그것을 오버레이하는 것이 원하는 둥근 효과를 만들 수 있음을 깨달았습니다.

기본 체크 무늬 패턴으로 시작하겠습니다. 55px), 반복-선형 그라디언트 (바닥까지, 투명, 투명한 50px, 흰색 50px, 흰색 55px), 선형 그레이드 (45deg, 핑크, 스카이 블루); / * 더 많은 스타일 */}

이 코드는 5px 흰색 간격으로 분홍색에서 스카이 블루로 전환되는 반복적 인 제곱 패턴을 생성합니다. 반복선 등간 그라디언트 함수는 수평 및 수직 흰색 줄무늬를 생성하며, 층이있을 때 체커 보드를 형성합니다. 세 번째 그라디언트는 색상 채우기를 제공합니다.

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

div : 왼쪽 -17px 상단 -17px 상단 -22px/55px 55px URL ( "data : image/svg xml,

"), 반복적 인 선형-그라디언트 (오른쪽, 투명, 흰색 50px, 흰색 55px), 반복적 인 55px) (정상, 투명한 50px, 투명한 50px) 흰색 55px), 선형 등급 (45deg, 핑크, 스카이 블루); / * 더 많은 스타일 */}

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

 <svg viewbox="0 35px 35px" xmlns="http://www.w30/2000/svg">  <div style="Color : 화이트; 35px" xmlns="http://www.w3.org/1999/xhtml"> </div> </svg>