몇 가지 흥미로운 CSS 주제에 대해 이야기해 보겠습니다. (4) - 리플렉션부터 시작하여 CSS 상속 상속에 대해 이야기해 보겠습니다.

이 시리즈에서는 몇 가지 흥미로운 CSS 주제를 논의합니다. 실용성은 제쳐두고 문제 해결을 위한 아이디어를 넓히기 위해 고안되었습니다. 또한 쉽게 간과할 수 있는 몇 가지 CSS 세부 사항도 포함합니다.

문제 해결 시 호환성은 고려되지 않습니다. 질문이 거칠고 제약이 없습니다. 문제 해결에서 익숙하지 않다고 생각되는 CSS 속성이 있으면 빨리 공부하세요. .

계속 업데이트하고, 계속 업데이트하고, 계속 업데이트하고, 중요한 것을 세 번 말하세요.

흥미로운 CSS 주제에 대해 이야기해 보세요(1)-왼쪽에 수직 막대를 구현하는 방법

흥미로운 CSS 주제에 대해 이야기하기(2) - 줄무늬 테두리 구현에서 상자 모델에 대해 이야기하기

흥미로운 CSS 주제에 대해 이야기해 보세요(3) - 스택 순서와 스택 컨텍스트에 대해 얼마나 알고 있나요

모든 주제는 내 Github에 요약되어 있습니다.

4. Reflection을 시작으로 CSS 상속에 대해 이야기해보겠습니다

다음 배경 이미지가 포함된 div가 제공됩니다.

다음 반사 효과를 만듭니다.

여러 가지 방법이 있지만, 물론 가장 빠르고 편리한 방법을 찾아야 합니다. 적어도 이미지가 어떻게 변하든, div 크기가 변하든 코드를 바꿀 필요는 없습니다. .

방법 1: -webkit-box-reflect

이것은 사용이 매우 간단하고 모든 방향에서 콘텐츠를 반영할 수 있는 매우 새로운 CSS 속성입니다. 하지만 호환성이 너무 좋지 않습니다.

기본적으로 -webkit- 커널 브라우저에서만 지원됩니다.

그런데 사용해보면 정말 편리합니다.

div{
    -webkit-box-reflect: below;
}

-webkit- 커널 아래 데모 보기

box-reflect 선택할 수 있는 방향은 4개입니다. below | above | left | right는 아래쪽, 위쪽, 왼쪽, 오른쪽을 나타냅니다. 자세한 내용은 MDN을 참조하세요.

방법 2: 상속, 상속 사용

이 질문은 주로 호환성이 좋은 이 방법을 소개하기 위한 것입니다.

inherit이란 무엇입니까? 각 CSS 속성 정의의 개요는 해당 속성이 기본적으로 상속되는지("상속됨: 예") 또는 기본적으로 상속되지 않는지("상속됨: 아니요")를 나타냅니다. 이는 요소의 속성 값을 지정하지 않은 경우 값이 계산되는 방식을 결정합니다.

부모 값을 상속하기 위해 inherit을 유연하게 사용하면 복잡해 보이는 많은 문제를 해결할 수 있습니다. 이 질문의 경우 이미지 컨테이너에 의사 요소를 추가하고 background-image:inherit을 사용하여 상위 값의 배경 이미지 값을 상속합니다. 이렇게 하면 이미지가 어떻게 변경되더라도 CSS 코드를 변경할 필요가 없습니다. 🎜>

div:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    bottom: -100%;
    background-image: inherit;
    transform: rotateX(180deg);;
}

데모로 찔러보기

의사 요소 background-image: inherit;를 사용하여 상위 요소의 배경 이미지를 상속한 다음 변환을 사용하여 컨테이너를 회전시켜 반사 효과를 얻습니다.

결국 CSS 속성의 값은 기본값(초기값), 상속(inherit), 가중치 시스템으로 구성됩니다( 에서 실제로 unset(未设置), revert(还原)) 등이 있는데, 그 관계와 사용법을 명확히 하는 것이 CSS를 익히는 데 큰 도움이 됩니다.

모든 주제는 내 Github에 요약되어 있으며 더 많은 교류가 있기를 바라며 블로그에 게시되었습니다.

아직 궁금한 점이나 제안사항이 있으면 더 많은 의견을 보내주시면 됩니다. 글의 내용이 제한되어 있고 잘못된 내용이 있는 경우. 기사로 알려주세요.