Div Four borders set the shadow style individually

The shadow of the div border has not been well understood, and it has never been clear how to set a shadow for four borders. Yesterday in the project encountered this problem, I seriously think about it, in this summary one or two.

First of all, from the official explanation.

The online explanation is usually what the horizontal shadow length, vertical shadow length, is slightly abstract. According to my experiments and understanding, from the coordinate level to understand the more intuitive, then we first establish the following Cartesian coordinate system: (suddenly found that my computer is not installed Visio, now learn to sell with PS temporary painting A, forgive me)

Ok. The origin is the base point, the left side of the origin is the x-axis negative direction, the value is negative, the right side is positive, the origin is the y-axis positive direction, the value is positive, and the top is negative. As the arrow indicates. Do you understand? Don't bother me, the correct understanding of the coordinate direction is essential for understanding the shadow painting.

Okay, on the code. Official language: box-shadow:1px 2px 3px 4px #ccc inset;

Take a look at the meaning of the above six values: 1px from the origin, the length along the positive direction of the x-axis (if negative, the length along the x-axis in the negative direction);

2px the length of the positive direction along the y-axis, starting at the origin, and (in the case of negative values, the length along the negative direction of the y-axis);

3px shadow blur, only positive values are allowed;

4px Shadow expansion radius;

#ccc shadow color;

Inset is set to inner shadow (if this value is not written, the default is an outer shadow);

Let us say in detail that the so-called internal and external shadow, in fact, refers to the shadow in the outside of the Div circle or in the inside of a div, such as:

Shadow inside Outer Shadow

Pave the way, say the matter-to four sides to add shadow.

If you intend to add an external shadow, the shadow will not appear inside the div. It looks like crap, so let's take a closer look.

Put the div in a Cartesian coordinate system, the top of the div coincides with the x axis, and the left side coincides with the Y axis, right. So, for the upper edge, the shadow along the positive y-axis is not displayed, because the length along the positive direction of the y-axis has entered inside the Div. Similarly, for the left border, the length of the positive direction along the x-axis is also inside the Div, and the shadows are not displayed.

For the right border, the length of the negative direction along the x-axis is not displayed (do not dwell on the origin position, only the coordinate direction is considered.) Can be regarded as the right and the Y axis coincident, easy to understand), for the lower border (as the bottom and the x-axis coincident), along the length of the y-axis negative direction into the div inside, not displayed.

Well, my language organizational skills need to be strengthened. It is easy to understand that the following code is in the text description of this paragraph.

/*Description: (The above side as an example to illustrate) 1. For the top, the offset along the x-axis is obviously meaningless, set to 0px;
2. Along the y-axis positive direction shadow into the div inside, do not display, therefore write negative numbers;
3. Expand the radius do not write, or written 0px, so that it does not affect the other side;
4. Color self-setting;
5. The degree of ambiguity is self-defined as required;
6. Lower, left, and right shadows are analogous by law. */box-shadow:0px-10px 0px 0px #ff0000,/*Top Shadow Red*/-10px 0px 0px 0px #3bee17,/*left Shadow Green*/10px 0px 0px 0px #2279ee,/*Right Shadow Blue*/0px 10px 0px 0px #eede15; /*Yellow Bottom Shadow*/

：

The outer shadow is added well. If it is an inner shadow, you can push it by yourself.

A problem was found in the experiment:

For the upper and lower sides, quite clean and beautiful. But when you write the shadow on the left, there is a thin shadow on the top and a thin shadow on the right side of the shadow. Don't understand why.

Look forward to the great God solution. Or put it first, and then answer it when I become a great God.

Div Four borders set the shadow style individually