The method of using CSS to inherit inherit to realize reflection

solve the problem without regard to compatibility, the topic of unrestrained, think of what to say, if there is a problem you feel the unusual CSSProperty , hurry up and cram it.

Constantly updated, constantly updated, constantly updated, important things to say three times.

4, from the reflection, talking about CSS inheritance inherit

Given a p with the following background graph:

Make the following reflection effect:

There are many ways to do this, but of course we have to find the quickest and most convenient way, at least no matter how the image changes, the p size changes, we do not have to change our code.

Law One:-webkit-box-reflect

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

Basically, only browsers with the-webkit-kernel are supported.

But the use is really convenient, the problem is as follows:

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

View demo under-webkit-kernel

box-reflectThere are four directions that can be selected, below | above | left | right representing the next up or left, and more specific can look at the MDN.

Law II: Inherit, using inheritance

The main subject is to introduce this method, compatibility is good.

inheritYes, the overview of each CSS property definition indicates whether this property is inherited by default ("Inherited:yes") or not inherited by default ("Inherited:no"). This determines how the value is calculated when you do not specify a value for the attribute of the element.

The flexibility to use inherit inherited parent values can solve many seemingly complex problems. For the subject, we add a pseudo-element to the picture container, using background-image:inherit the background graph value that inherits the parent value, we can do no matter how the picture changes, our CSS code does not need to change:

P:before {    content: "";    Position:absolute;    top:100%;    left:0;    right:0;    Bottom: -100%;    Background-image:inherit;    Transform:rotatex (180deg);;}

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

Default value (initial) , Inheritance (Inherit) and weighted system (in fact, unset (not set) , Revert (Restore) ), clarifying their relationships and how to use them is a great benefit for skilled use of CSS.