The shadow effect Box-shadow and Text-shadow of CSS3

In this article, we're going to talk about the Box-shadow and Text-shadow properties that are often used in CSS3 to develop page blur shading effects.

In the front-end development process, we often see this effect:

 
 

  
  

  

  
  

  

  
  

  

  
  

  

  
  

  
Shadow
  
  

  

  
  

  

  
  

  

  
  

  

   

  
  

  

  
  

  

 
 

This shadow effect is implemented using the Css3box-shadow property.

Box-shadow

The Box-shadow property adds one or more shadow effects to the box element.

• Syntax:

  box-shadow: [inset] X-offset y-offset [blur] [spread] [color];

• Properties

Property	explanation
inset
x-offset	required, horizontal shading Offset, which can be negative.
y-offset	> necessary, vertical overcast. Shadow offset, which can be a negative number.
blur	optional, shaded blur radius, not is negative.
spread	> optional, shaded extension radius, can is negative.
optional, shadow color

Shadow Offset

The Box-shadow shadow offset can be positive and negative, and the right or bottom offset is positive, as follows:

• Positive horizontal offset Shadow

• Negative horizontal offset Shadow

• Positive vertical Offset Shadow

• Negative vertical offset Shadow

Fuzzy radius

• Positive Blur radius Shadow

• Box-shadow does not support negative blur radius

Extension radius

• Positive extension radius

  Extending the radius of the shadow outward

• Negative extension radius

  Negative extension radius inward contraction shadow radius

Text-shadow

The Text-shadow property sets a shadow to the text.

• Syntax

  text-shadow:x-offset y-offset blur color;

• Properties

Property	Description
X-offset	Required, horizontal shadow offset, which can be negative.
Y-offset	Required, the shadow offset in the vertical direction, which can be negative.
Blur	Optional, shaded blur radius, not negative.
Color	Optional, shadow color