Let's talk about some interesting CSS topics (4) – starting with reflection, let's talk about CSS inheritance inherit

Start this series and discuss some interesting CSS topics. Putting aside practicality, some topics are designed to broaden the ideas for solving problems. In addition, they involve some CSS details that are easily overlooked.

Compatibility is not taken into account when solving problems. The questions are wild and wild. Just say whatever comes to mind. If there are CSS properties that you feel are unfamiliar in the problem solving, go and study them quickly.

Keep updating, keep updating, keep updating, say important things three times.

Let’s talk about some interesting CSS topics (1)--How to implement the vertical bar on the left

Let’s talk about some interesting CSS topics (2) – Talking about the box model from the implementation of striped borders

Let’s talk about some interesting CSS topics (3) – How much do you know about stacking order and stack context

All topics are summarized in my Github.

4. Starting with reflection, let’s talk about CSS inheritance

Given a div with the following background image:

Create the following reflection effect:

There are many methods, but of course we have to find the fastest and most convenient method. At least no matter how the image changes or the size of the div changes, we don’t have to change our code.

Method 1: -webkit-box-reflect

This is a very new CSS property. It is very simple to use and can reflect our content from all directions. But the compatibility is too bleak:

Basically, only browsers with -webkit- kernel support it.

But it’s really convenient to use. The solution is as follows:

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

-webkit- View Demo under the kernel

box-reflect There are four directions to choose from, below | above | left | right represents bottom, top, left, and right. For more specific information, you can check out MDN.

Method 2: inherit, use inheritance

This question is mainly to introduce this method, which has good compatibility.

What is

inherit? The overview of each CSS property definition indicates whether the property is inherited by default ("Inherited: Yes") or not inherited by default ("Inherited: no"). This determines how the value is calculated when you don't specify a value for the element's attribute.

Flexible use of inherit to inherit parent values ​​can solve many seemingly complex problems. For this question, we add a pseudo element to the image container and use background-image:inherit to inherit the background image value of the parent value. This way, no matter how the image changes, our CSS code does not need to be changed:

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

Demo poke me

We use pseudo-element background-image: inherit; to inherit the background image of the parent element, and then use transform to rotate the container to achieve the reflection effect.

In the final analysis, the value of CSS properties is composed of default value (initial), inherit (inherit) and weighted system (in fact, there are also unset (unset), revert (restore) ), clarifying their relationship and usage is of great benefit to becoming proficient in using CSS.

All the topics are summarized in my Github and posted to the blog in the hope of getting more exchanges.

This is the end of this article. If you still have any questions or suggestions, you can communicate more. It is an original article. The writing style is limited and the knowledge is shallow. If there is anything wrong in the article, please let me know.