A CSS style that centers text horizontally and vertically in a div, with four edges setting the shadow style individually

Text-align:center; /* Horizontal center */line-height:20px; /* Line spacing set to match div height */

HTML elements

<div> Horizontal Vertical Center </div>

CSS Styles

div{    width:200px;height:200px;  /* Set the size of the div */    border:1px solid green;    /* Border */    text-align:center;        /* Text Horizontally center-align */    line-height:200px;        /* Set text leading equal to the height of div */    Overflow:hidden;}

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) 1. For the top, the offset along the x-axis is obviously meaningless, set to 0px; 
 2. In the direction of the y-axis, the shadow enters the div interior, does not appear, and therefore is written as a negative number; 
 3. Expand the radius do not write, or written 0px, so that it does not affect the other edges; 
 4. Color custom; 
 5. The degree of ambiguity is customized as required; 
 6. Lower, left, and right shadows are analogous by law. */ box-shadow:0px-10px 0px 0px #ff0000, /* Upper shadow red */- 10px 0px 0px 0px #3bee17, /* left shadow green */ 10px 0px 0px 0px #2279ee, /* Right shadow blue */ 0px 10px 0px 0px #eede15; /* bottom shadow yellow */   

：

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

A CSS style that centers text horizontally and vertically in a div, with four edges setting the shadow style individually