Talk about some interesting CSS topics (iv)--from the reflection, talk about CSS inheritance inherit

Folio Series, discuss some interesting CSS topics, aside from practicality, some topics in order to broaden the problem-solving ideas, in addition, involves some easy to ignore CSS details.

Problem-solving does not consider compatibility, the topic of unrestrained, think of what to say, if you feel the problem in the CSS properties of the rare, hurriedly to cram it.

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

All topics are summarized on my Github.

4, from the reflection, talking about CSS inheritance inherit

Given a div 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 div 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:

div{    -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:

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 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.

In the final analysis, the value of the CSS property is the default value (initial), Inheritance (Inherit) and the weighted system (in fact, there is unset(未设置) , revert(还原) ), Clarifying their relationships and how to use them is a great benefit for skilled use of CSS.

All topics are aggregated on my Github and sent to blogs hoping to get more communication.

To this end of this article, if there are any questions or suggestions, you can communicate a lot, original articles, writing limited, Caishuxueqian, if there is not in the text, million hope to inform.

Talk about some interesting CSS topics (iv)--from the reflection, talk about CSS inheritance inherit