To be a Box-shadow button.

After the article: http://blog.csdn.net/u010037043/article/details/47035077

First, Box-shadow

Box-shadow is to add a perimeter shadow effect to an element block.

Box-shadow:inset x-offset y-offset blur spread color;

box-shadow:[projection mode] x-axis offset y-axis offset shadow blur radius Shadow expansion radius shadow color

Shadow type : This parameter is optional. If the value is not set, the default projection method is the outer shadow; If the value "inset", its projection is the inner shadow;

X-offset: The shadow horizontal offset, whose value can be a positive or negative value.

y-offset: The vertical offset of the shadow, which can also be a positive or negative value.

Shadow Blur radius : This parameter is optional, but its value can only be positive, and if its value is 0 o'clock, indicates that the shadow does not have a blur effect, the greater the value of the shadow the more blurred the edge;

Shadow Expansion radius : This parameter is optional, its value can be positive negative, if the value is positive, then the entire shadow is extended, the inverse value is negative, then zoom out;

Shadow color : This parameter is optional. If you do not set the color, the browser will take the default color, but the browser default color inconsistent, it is recommended not to omit this parameter.

Do a few demos to help you look at the role of each parameter: The projection mode is insetprojection mode is outset

Browser support is as follows:

Second, the Box-shadow in the demo

Box-shadow:inset Rgba (255,254,255,0.6)0 0.3Em.3EM, inset Rgba (0,0,0,0. the)0-0.1Em.3EM,HSL ( the, -%,  +%) 0.1Em3PX, HSL ( the, -%,  -%) 0.3Em1PxRgba(0,0,0,0.2)0.5Em5px

For everyone to see more clearly, I will be in the demo of the Box-shadow outset type of position adjustment, the inset type of color changed. You can see that for the button in the demo, the light from above is simulated. Therefore, the projection of the button surface, that is, the projection of the inset type is a highlighted type, and translucent.

The lower part of the button is divided into places where the light is not hit, so the outset type of projection is getting deeper and darker, and the last one is gray, so that the whole button has a stereoscopic effect in the two-dimensional plane.

Demo Stamp Link HTTP://RUNJS.CN/DETAIL/JDUIC0CJ

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

To be a Box-shadow button.