CSS2.1을 사용하여 여러 배경 및 여러 테두리 효과 달성
CSS2.1을 사용하여 단일 HTML 요소에 3개의 배경 이미지와 2개의 콘텐츠 이미지의 효과를 얻거나 여러 테두리의 효과를 얻습니다. 이 점진적인 향상 방법은 CSS2.1 의사 요소와 해당 위치 지정 속성을 지원하는 모든 브라우저에 적용됩니다. CSS3 지원이 필요하지 않습니다.
지원되는 브라우저: Firefox 3.5+, Safari 4+, chrome4+, Opera10+, IE8+
이것이 어떻게 달성됩니까?
본질적으로 우리가 생성하는 의사 객체(:before 및 :after)는 중첩된 HTML 요소를 처리하는 방법과 동일합니다. 그러나 중첩된 HTML 요소에 비해 고유한 이점이 있습니다. 즉 의미론적이지 않습니다.
여러 배경이나 여러 테두리를 사용하는 경우 절대 위치 지정을 사용하여 HTML 요소 콘텐츠 뒤에 있는 의사 요소 레이어의 콘텐츠를 수정해야 합니다.
실제가 아닌 내용은 위치 지정을 위해 유사 요소에 포함됩니다. 이는 내용에 영향을 주지 않고 "상위" 요소의 범위 내에서 자유롭게 확장할 수 있음을 의미합니다. 이는 절대 위치 지정의 위쪽, 오른쪽, 아래쪽, 왼쪽, 너비 및 높이 값을 임의로 결합할 수 있다는 점입니다. 주요 핵심은 이들의 조합 성능이 유연하다는 것입니다.
어떤 효과를 얻을 수 있나요?
여러 배경색, 여러 배경 이미지, 배경 이미지 클리핑, 이미지 뒤집기, 이미지 테두리를 사용한 확장 가능한 상자 모델, 부동 가짜 열 등을 생성하려면 하나의 HTML 요소와 관련 이미지만 사용하면 됩니다(Xiaozhi의 메모: 3열 동일 높이 효과(나중에 언급됨), 상자 모델 외부의 그림, 외부에 표시되는 다중 테두리 및 기타 인기 있는 효과입니다. 생성된 콘텐츠에는 2개의 추가 콘텐츠 이미지가 필요할 수 있습니다.
CSS2.1을 사용한 다중 배경과 CSS2.1을 사용한 다중 테두리 데모 페이지에서는 CSS2.1 의사 개체 기술을 사용하여 이러한 인기 있는 효과를 얻는 방법을 보여줍니다.
대부분의 구조에는 하위 요소가 포함되어 있습니다. 따라서 상위 요소의 첫 번째 하위 요소(마지막 하위 요소로 설정)인 의사 요소를 통해 더 많은 효과를 표시할 수 있는 경우가 많습니다. 또한 :hover를 사용하여 스타일에 복잡한 대화형 효과를 생성할 수도 있습니다.