Detailed explanation on the use of box-shadow attribute in CSS3

Every time you use box-shadow, you have to consult the information to achieve the corresponding effect. Let’s summarize it now for easy reference in the future.

1. Grammar:

## E {box-shadow: inset x-offset y-offset blur-radius spread-radius color}; E {box-shadow: Projection method ：

1. Shadow type: This parameter is optional. The default projection method is outer shadow; if the only value "inset" is taken, the outer shadow will be changed into inner shadow;

2. Y-offset: refers to the vertical offset of the shadow. Its value can also be positive or negative. For positive values, the shadow is at the bottom of the object. For negative values, the shadow is at the top of the object; 4. Shadow Blur radius: This parameter is optional and can only be positive. If its value is 0, it means that the shadow does not have a blur effect. The larger the value, the blurr the edge of the shadow;

5. Shadow expansion radius : This parameter is optional, and its value can be positive or negative. If it is a positive value, the entire shadow will be expanded, otherwise, it will be reduced.

6. Shadow color: This parameter is optional. When no color is set, , the browser will take the default color, but the default color of each browser is different, especially the safari and chrome browsers under the webkit kernel will be colorless, that is, transparent. It is recommended not to omit this parameter.

3.

:

//Firefox4.0-
-moz-box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
//Safari and Google chrome10.0-
-webkit-box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
//Firefox4.0+ 、 Google chrome 10.0+ 、 Oprea10.5+ and IE9
box-shadow:  投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;

IE filter simulates box-shadow shadow effect

Basic syntax: filter:progid:DXImageTransform.Microsoft.Shadow(color='color value', Direction =Shadow angle (numeric value),Strength=Shadow radius (numeric value));

: 1. This filter must be used together with the background attribute, otherwise the The filter is invalid;

3. The shadow of the filter is calculated within the width and height;

5. Commonly used shadow implementation code

##

The above is the detailed content of Detailed explanation on the use of box-shadow attribute in CSS3. For more information, please follow other related articles on the PHP Chinese website!