In addition to adding a shadow to the text, we can also add a shadow box model. Shaded box model attribute name box-shadow, text-shadow This property has four different values, the first two values represent the distance and the displacement distance of displacement in the vertical direction in the horizontal direction, a third value represents the shadow fuzzy radius ( and contains the following values were 0 indicates no blurring), the last one is the color of the shadow. Before Chrome 16 +, FireFox8 +, Opera11.6 +, Safari5.1 + and IE9 + prefix can be used as box-shadow, without the need for -webkit- like.
The syntax is as follows:
box-shadow:[inset] x y blur [spread] color
box-shadow parameters as described in Table 1.
Table 1 box-shadow Parameter Description
text-shaow parameters consistent with the meaning of the text shadow, lateral offset and longitudinal offset may be negative, representative of the left box model shadow offset or shifted upwards. Shadow box model also can be superimposed. By adding layers of shadow "," separated. Shadow overlay is to re-render rendering behind the front.
1. The simplest use
box-shadow:2px 2px 20px #000;
This syntax is illustrated as a text set laterally offset 2px, longitudinally offset 2px, unambiguous range of the black shadow 20px. The following is an example of a single shadow. code show as below:
Use the browser directly open this file, you can see the results of the browser page document to explain this, I can see it outside the box adds a layer of black shadow, shown in Figure 1.
FIG shadow box model 1
2. Projection shadow box model
box-shadow: inset 2px 2px 20px #000;
This syntax is illustrated as one layer projection nesting box model. Lateral offset 2px, longitudinally offset 2px, the unambiguous range of the black 20px projection. code show as below:
Browser directly open the file, the browser can see the results of the interpretation of this document page, the cartridge is coupled within the projection model, shown in Figure 2:
The model projection FIG cartridge 2
3. Superimposed shadow box model
box-shadow: 2px 2px 20px green，inset 2px 2px 20px blue;
This syntax is described set-layer shadow box model. The first layer is a lateral offset 2px, longitudinally offset 2px, fuzzy outwardly from green shadow 20, the second layer is laterally offset 2px, longitudinally offset 2px, fuzzy distance projection of the blue 20px. code show as below:
Browser directly open the file, the browser can see the results of the interpretation of this document page, box was added two shadows, one of which is the projection, as shown in FIG.
FIG 3 is superimposed shadow box model