CSS3 the use of Layer shadows and text shadows

This article mainly introduces the use of CSS3 layer Shadow and Text shadow, has a certain reference value, now share to everyone, the need for friends can refer to

Box-shadow layer Shadow properties and Text-shadow Text Shadow properties are similar in usage, with the x-axis and y-axis coordinate systems to control the shadow extension, here we explain the CSS3 layer shadow and Text shadow effects using:

Box-shadow Layer Shadows

Box-shadow: Shadow type x horizontal offset (preferably positive or negative) Y vertical offset (preferably positive or negative) shadow size shadow Extended Shadow color value
The shadow type can be omitted, and the default is an outer projection, which is an inner shadow effect when its value is inset.
The x horizontal offset and y vertical offset are positive negative values, and when x is negative, it is projected on the left, and the projection is on the right. When Y is negative, it is projected on the top, and is projected below.
The size and extension of the shadow is the same as the principle inside PS.

Browser compatibility:
Different browser compatibility, Mozilla Kernel browser is written as follows (but the new version of Firefox has no need to add):
-moz-box-shadow: Shadow type x horizontal offset (preferably positive or negative) Y vertical offset (preferably positive or negative) shadow size shadow Extended Shadow color value
The browser of the WebKit kernel is written as follows:
-webkit-box-shadow: Shadow type x horizontal offset (preferably positive or negative) Y vertical offset (preferably positive or negative) shadow size shadow Extended Shadow color value

Example one:

<p class= "Shadow" ></p>   . shadow{    width:200px;    height:50px;    box-shadow:3px 3px 3px 3px #000;    /*-moz-box-shadow:3px 3px 3px 3px #000;    Mozilla Kernel Browser, which is represented by Firefox, has already supported this property in Firefox's current version, so it is not necessary to add-moz*/-webkit-box-shadow:3px 3px 3px 3px #000;   }

：

Change the Box-shadow projection type to inset:

Example two:

<p class= "Shadow" ></p>   . shadow{    width:200px;    height:50px;    box-shadow:0 -5px 5px 0 red,5px 0 5px 0 yellow,0 5px 5px 0 green,-5px 0 5px 0 blue;    /*-moz-box-shadow:0 -5px 5px 0 red,5px 0 5px 0 yellow,0 5px 5px 0 green,-5px 0 5px 0 blue;    The Mozilla Kernel browser, which is represented by Firefox, has already supported this property in Firefox's current version, so no more-moz*/-webkit-box-shadow:0 -5px 5px 0 red,5px 0 5px 0 yellow,0 5px 5px 0 gree n,-5px 0 5px 0 blue;   }

：

Text-shadow Text Shadow

Above we discussed about CSS3 layer Shadow Box-shadow to achieve the effect of layer shadow, today we learn how to achieve the effect of text shadow, will be used to css3 another property Text-shadow, these two effects enhance the texture of the layer and text, respectively, Create a stereoscopic effect.

Grammar:

Text-shadow:none | <length> None | [<shadow>,] * <shadow> or none | <color> [, <color>]*

Displacement on the text-shadow:x axis (positive or negative), displacement on y-axis (plus or minus), width of shadow, color value of shadow

Description
Like a layer shadow, it can also apply one or more sets of shadow effects to the same object, separated by commas. The x-axis offset can be positive or negative, offset to the right when X is positive, and left offset when negative. The y-axis offset can be positive or negative, offset downward when x is positive, and offset upward when negative. The color value of the shadow can be #xxx, RGB, or rgba transparent color.

Example: Text-shadow

The display results are as follows:


Compare Box-shadow


The effect is as follows:

The display results are as follows:

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!