How to add shadow effect with css? (code example)

How to add shadow effect in css? Can be added using the text-shadow attribute and box-shadow attribute. The following article will introduce to you how the text-shadow attribute and box-shadow attribute add shadow effects. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Recommended manual: CSS3 latest version reference manual

1: Add Text shadow effect (text-shadow attribute)

1. What is text-shadow?
text-shadow can support adding shadow to text, so that we can use css3 attributes to increase the texture of text during design without using any images. Currently supported browsers include Firefox 3.1, Safari 3, Opera 9.5 and other modern browsers (data There may be deviations). Of course, the IE family cannot support it.

2. The syntax of text-shadow:

text-shadow:color length length length;

color: color;
length: respectively In order, it refers to "X-axis direction length, Y-axis direction length, shadow blur radius", which represents a length value composed of a floating point number and a unit identifier, which can be a negative value (or 0 value), specifying the horizontal extension distance of the shadow.

Positive values on the X-axis mean to the right, negative values mean to the left. In the same way, negative values on the Y-axis mean upward. Any of the values can be zero or empty (will be processed by default)

For example:

text-shadow:0.1em 0.1em 0.3em #333333;

The first value of the text-shadow attribute represents horizontal displacement, the second value represents vertical displacement, positive value means right or downward, negative value means horizontal displacement. The value is left or upper. The third value represents the blur radius (this value is optional). The fourth value represents the color of the shadow (this value is optional). This color value can be placed before the length value of the shadow effect. or after. If no color is specified, the value of the color attribute will be used instead.

The text-shadow attribute accepts a comma-separated list of shadow effects to apply to the text of the element. Shadow effects are applied in the order given, so it is possible to cover each other, but not the text itself. Shadow effects do not change the dimensions of the border, but may extend beyond its bounds.

3. Code example

The main use is the shadow list of text-shadow, plus the use of reasonable color matching, we can achieve the desired effect.

      
  
 
多色阴影效果
 
火焰效果
 
立体凸起效果
 
立体凹下效果
 
描边效果
 
外发光效果
 
  

Rendering:

##Recommended related articles: 1.
How to achieve a single-sided shadow effect in css 2.
How to achieve a box shadow in css3? Shadow effect in css3 Related video tutorials:
1.
CSS Video Tutorial-Jade Girl Heart Sutra Edition

2. Add box (border) shadow effect (box-shadow attribute)

1. The syntax of box-shadow

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

E {box-shadow: projection method X-axis offset Y-axis offset shadow blur radius shadow spread radius shadow color };

Value:

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 turned into an inner shadow;
2. 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 It is optional and can only be a positive value. 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 It can be a positive or negative value. 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 use the default color, but each The default colors of browsers are different, especially Safari and Chrome browsers under the webkit kernel will be colorless, that is, transparent. It is recommended not to omit this parameter.

2. Consider compatibility

//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轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;

3. Code example

      
  
 
右下阴影
 
四边同色阴影
 
四边同色阴影扩展
 
四边同色内阴影
 
四边异色外阴影
 
叠加异色阴影
 
兼容ie
 
  

Rendering:

The above is the detailed content of How to add shadow effect with css? (code example). For more information, please follow other related articles on the PHP Chinese website!