Make a box-shadow for the cute button

Make a box-shadow for the cute button

Next: http://blog.csdn.net/u010037043/article/details/47035077

I. box-shadow

Box-shadow adds the surrounding shadow effect to the element block.

Box-shadow: inset X-offset Y-offset blur spread color;

Box-shadow: [Projection Method] X axis offset Y axis offset shadow blur radius shadow extended radius shadow color

Shadow Type: this parameter is optional. If no value is set, the default projection method is external shadow. If the value is "inset", the projection method is internal shadow;

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

Y-offset: the vertical offset of the Shadow. The value can also be positive or negative.

Shadow blur radius: this parameter is optional, but its value can only be positive. If its value is 0, it indicates that the shadow has no blur effect, the greater the value, the blurrier the edge of the shadow;

Radius of shadow Extension: this parameter is optional. The value can be positive or negative. If the value is positive, the entire Shadow is extended. If the value is negative, the shadow is reduced;

Shadow color: this parameter is optional. If no color is set, the browser uses the default color, but the default color of each browser is inconsistent. We recommend that you do not omit this parameter.

I made a few demos to help you see the functions of each parameter: the projection method is inset, and the projection method is outset.

The browser supports the following:

Ii. box-shadow in demo

box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15)             0 -0.1em .3em,hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%)             0 .3em 1px,rgba(0,0,0,0.2) 0 .5em 5px;

 

To make it more visible, I adjusted the position of the outset type of box-shadow in the demo and changed the color of the inset type. We can see that for the button in the demo, the simulated light is played from the top. Therefore, the projection of the button surface, that is, the inset projection is highlighted and translucent.

The lower part of the button is divided into areas where the light cannot be played, so the projection of the outset type is getting deeper and deeper, and the last one is gray, so that the entire button has a three-dimensional effect on the two-dimensional plane.

Demo stamp link http://runjs.cn/detail/jduic0cj

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.