CSS shadow effect

Document directory

• Table or table list control elements are often present in some readers

CSS box-shadowThe characteristics of the production effect or the light effect

• Description: Elements (Elements)BoxDisplays the effect of shadow or shadow. You can specify the displacement of the shadow to the margin, colors, blur degree, and scattered degree. It also supports the inner shadow, or even the hidden shadows of Multiple Heap shadows. Use thisCSSLevel 3(CSS3) features (CSSProperty), So that we can see a fascinating effect without having to upload images. What is more important is that the animated shadows will not affect the layout.
• Combination: HTMLAnd CSSThe concept of the legal foundation.
• Degree of Parallelism:
• Updated: 2011-06-16
• Support:Firefox,Google Chrome,Opera,IE9 (at the time of writing ).

Tagging

        box-shadow: x y blur spread color inset;      

Description

• There are 6 feature values, each of which is separated by at least one half-space. Resetnone(Only one word ).
• The first four are dimension values (Length, Not accept %), in order to indicate horizontal displacement deviation (x), vertical displacement distance deviation (Y), fuzzy degree (Blur), Scatter degree (Spread), Cannot be inserted into other values.
• The first two displacement values (x y) Must be specified as a required value. The value of the vertex can be ambiguous.
• Fuzzy (Blur) And scattered (Spread) The priority setting value (when there is no definition) is generally 0. Fuzzy values cannot be values.
• 5th shadow colors (Color), CSSA valid two-color value indicates that both the two-color value can be placed before the displacement value. Is used (orCheng)colorThe color value specified by the feature.
• 6th images can be specified as inner shadows (inset). It can also be placed in 1st locations. There is no such thing as a normal negative shadow.
• Values of all groups can be added to multiple groups. They are separated by commas (,), indicating in sequence the multi-member shadows from the front to the back.
• Usage element: All.
• Using media:Visual.
• It is not accepted.

Examples

            box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);box-shadow:2px 2px 1px rgba(20%,20%,40%,0.5) inset;box-shadow:2px 2px 2px rgba(20%,20%,40%,0.6),4px 4px 6px rgba(20%,20%,40%,0.4),6px 6px 12px rgba(20%,20%,40%,0.4);          

Next, we will discuss more examples.

Thinking-CSS box-shadowLinear Regression has a quality and multi-variant effect or optical regression effect.

External shadows (or external shadows) depend onBorder-boxTo calculate the size and displacement, while the inner shadow (or inner light) depends onPadding-boxComputing.

Later, we will see that the sampling method of the example has added the features of the first two segment of shopping malls, provided to some referers that do not officially support the use of zookeeper versions earlier than the standard transfer method, without adding the region of the website, it does not affect the new version of the browser, which is highlighted in pale colors.

• There are-moz-Of: UsedFirefoxOther editionsGeckoSeries.
• There are-webkit-Of: UsedSafari,Google ChromeOther editionsWebKitSeries.

CSS of each exampleBoth have the same background color and border.

          background:#def;border:1px solid silver;display:inline-block;padding:0.5em 0.75em;        

In the following example, CSS is applied to each subject.Effect. Why can't I see the expected effect?

At least two dimension values are required, indicating the horizontal (x) vertical (y) displacement of the Shadow. The value 0 indicates no displacement (that is Box).

                      -moz-box-shadow:4px 4px rgba(20%,20%,40%,0.5);-webkit-box-shadow:4px 4px rgba(20%,20%,40%,0.5);            box-shadow:            4px 4px             rgba(20%,20%,40%,0.5);                  

Increase the size by 3rd to indicate the Blur degree of the Shadow ( Blur), Of course, increasing the Blur level will also make the shadow more transparent.

                      -moz-box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);-webkit-box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);            box-shadow:4px 4px             3px             rgba(20%,20%,40%,0.5);                  

The numeric displacement value is used to show shadows in different directions.

                      -moz-box-shadow:-4px -4px 3px rgba(20%,20%,40%,0.5);-webkit-box-shadow:-4px -4px 3px rgba(20%,20%,40%,0.5);            box-shadow:            -4px -4px             3px rgba(20%,20%,40%,0.5);                  

Add 4th dimension values to indicate the scatter degree of the Shadow ( Spread), You can also visualize the effect of the light.

                      -moz-box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5);-webkit-box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5);            box-shadow:4px 4px 12px             4px             rgba(20%,20%,40%,0.5);                  

Use metric data SpreadValue, which is similar to a week-long shadow.

                      -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);-webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);            box-shadow:4px 4px 12px             -2px             rgba(20%,20%,40%,0.5);                  

Add at the beginning or end insetChanges to inner shadows, which can be concave.

                      -moz-box-shadow:inset 3px 3px 3px rgba(20%,20%,40%,0.5);-webkit-box-shadow:inset 3px 3px 3px rgba(20%,20%,40%,0.5);            box-shadow:            inset             3px 3px 3px rgba(20%,20%,40%,0.5);                  

Inner Shadow SpreadValue, plus a concave sense of reality.

                      -moz-box-shadow:1px 1px 3px 2px rgba(20%,20%,40%,0.5) inset;-webkit-box-shadow:1px 1px 3px 2px rgba(20%,20%,40%,0.5) inset;            box-shadow:1px 1px 3px             2px             rgba(20%,20%,40%,0.5)             inset            ;                  

More realistic and deeper shadows.

Multiple screenshots: a group of more than one number, which are separated by commas. Of course, the transparent colors of the Shadow will be blurred.

                      -moz-box-shadow:2px 2px 2px rgba(20%,20%,40%,0.6),4px 4px 6px rgba(20%,20%,40%,0.4),6px 6px 12px rgba(20%,20%,40%,0.4);-webkit-box-shadow:2px 2px 2px rgba(20%,20%,40%,0.6),4px 4px 6px rgba(20%,20%,40%,0.4),6px 6px 12px rgba(20%,20%,40%,0.4);            box-shadow:            2px 2px 2px rgba(20%,20%,40%,0.6)            ,            4px 4px 6px rgba(20%,20%,40%,0.4)            ,            6px 6px 12px rgba(20%,20%,40%,0.4)            ;                  

Images with transparent regions (imgElement) Definitionbox-shadow, Of course, in the wholeimgElementBox(Including transparent regions. In this example, in addition to the animated film and shadow, the foreign element also specifiesinsetThe screenshot shows a more specific picture. The screenshot does not appear in the screenshot method. Please renew it on your own.

                      -moz-box-shadow:2px 2px 2px rgba(20%,20%,40%,0.6),4px 4px 6px rgba(20%,20%,40%,0.4),6px 6px 12px rgba(20%,20%,40%,0.4);-webkit-box-shadow:2px 2px 2px rgba(20%,20%,40%,0.6),4px 4px 6px rgba(20%,20%,40%,0.4),6px 6px 12px rgba(20%,20%,40%,0.4);            box-shadow:2px 2px 2px rgba(20%,20%,40%,0.6),4px 4px 6px rgba(20%,20%,40%,0.4),6px 6px 12px rgba(20%,20%,40%,0.4);                  

Different colors are different.

Different colors of the shadow, specifying the offset of the intersection, can also show a special sensation. The elements that the shadow spans To the bottom cannot be moved to the typographical layout.

                      -moz-box-shadow:8px 24px 2px rgba(100%,0%,0%,0.4),16px -4px 2px rgba(0%,100%,0%,0.4),24px 12px 2px rgba(0%,0%,100%,0.4);-webkit-box-shadow:8px 24px 2px rgba(100%,0%,0%,0.4),16px -4px 2px rgba(0%,100%,0%,0.4),24px 12px 2px rgba(0%,0%,100%,0.4);            box-shadow:            8px 24px 2px rgba(100%,0%,0%,0.4)            ,            16px -4px 2px rgba(0%,100%,0%,0.4)            ,            24px 12px 2px rgba(0%,0%,100%,0.4)            ;                  

Both the content and the content are shadow, and the same element can be used.

                      -moz-box-shadow:6px 6px 6px rgba(20%,20%,40%,0.5),inset 1px 1px 4px 2px rgba(20%,20%,40%,0.5);-webkit-box-shadow:6px 6px 6px rgba(20%,20%,40%,0.5),inset 1px 1px 4px 2px rgba(20%,20%,40%,0.5);            box-shadow:            6px 6px 6px rgba(20%,20%,40%,0.5)            ,            inset             1px 1px 4px 2px rgba(20%,20%,40%,0.5)            ;                  

Pendingbox-shadowOperation in Image:hover,:focusSimilar to a metric with user interaction (Selectors), There will be more interesting results to present, you can increase your skills on your own!

Table or table list control elements are often present in some readers

As of the time of writing,Safari5 not supportedbox-shadowThe standard signature method must use-webkit-Signature method.

Commentbox-shadowIt can be used on all elements, but some elements are unique, such as table type and table list control elements (Controls), There will be abnormal handling on the browser. When writing an article, I wrote some comments specially.

Table type

• Table store (suchth,td): IftableElement specifiedborder-collapse:collapse;Feature (there is no gap between memory cells), in IENegative effect.
• Table columns (suchtr): InGoogle Chrome,OpreaNegative effect; in IEThe shadow is displayed on the inventory.

Table list control elements ( Controls)

The timer has a control element that sets the background color (for example button, input), In IE, Google ChromeA new background color or transparent background must be specified.

In Google ChromeYou must specify box-shadowOf colorValue.

Additional test resources

• box-shadow-W3COfficial Document (English ).

Please refer to the following link for details about how to scatter and display Creative CommonsPermission granting. Re-mixing is prohibited. Add the original article for reference. CSS, box, shadow, shadow, light shadow, inset, Moz, WebKit