CSS 골프 운동

Code Golfing은 가능한 한 적은 바이트를 사용하여 작업을 수행하는 것이 목표 인 프로그래밍 유형입니다. CSSBattle은 플레이어가 CSS 및 HTML을 사용하여 대상 이미지를 재현하기 위해 완료하는 코드 골프 전장입니다.

규칙은 상당히 간단합니다.

• 외부 리소스 없음 (죄송합니다. )
• 솔루션은 크롬으로 올바르게 렌더링해야합니다 (점수 목적으로 만)

이것은 일상적인 프론트 엔드 작업에서 꽤 재미있는 출발 일 수 있습니다. 유지 관리, 의미론, 성능, 접근성 또는 실제로는 실제로 작고 여전히 올바르게 렌더링하는 것 외에는 걱정할 필요가 없습니다.

12 번의 시도로 골프 솔루션

이러한 유형의 사고는 대부분의 사람들이 생산 사이트에 대한 프론트 엔드 코드를 작성하는 방식에서 매우 극적인 출발입니다 (희망!). 그래서 나는 지식을 공유하고 다른 사람들로부터 배우기 위해 Github에 모든 솔루션을 게시했습니다. 운이 좋은 부작용으로서, 내 제출에 대한 상당히 상세한 기록이 있음을 의미합니다.

다음은 CSSBattle의 7 번째 목표에 대한 내 시도에 대한 시작부터 다음과 같습니다.

“그냥 댄을 중심으로”방법

합리적인 첫 번째 접근 방식은 페이지 중간에 요소를 단순히 붙잡고 상자 그림자와 테두리 반경을 때리고 완료하는 것입니다. 우리가 이것을“진짜”로 쓰고 있다면, 그것은 다음과 같습니다.

 

  
    
      몸 {
        배경 : #0B2429;
        여백 : 0;
      }

      .잎 {
        너비 : 150px;
        높이 : 150px;
        Border-Radius : 67% 0;
        배경 : #f3ac3c;
        여백 : 75px 0 75px 175px;
        Box-Shadow :
          -50px 0 #998235, 
          -100px 0 #1A4341
      }
    스타일>
  
  
    <div></div>
  

위 내용은 CSS 골프 운동의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!