CSS Shadow effect: How to set CSS border shadow?

In the Web page design process, we often need to set some special effects on the Web page, so that the design of the page looks more beautiful, this article will give you how to set the border by CSS shadow effect, CSS shadow effect may let the design out of the box more stereoscopic, say not much, Let's take a look at the setting method of the CSS border shadow effect.

When we set the Border shadow, one of the essential properties is that Box-shadow,box-shadow can add one or more shadows to the box. Let's take a look at specific examples.

<! DOCTYPE html>
The effect is as follows:


Add a shadow effect to the box, is not more stereoscopic, more beautiful (the color may not be very good, but you can choose a more beautiful match ... ^@^)

Note: We see in the above code that there are four attribute values behind Box-shadow, what do they mean by each other?

Here's a look at the meaning of the Box-shadow property value. (Recommended: CSS border property instances)

Box-shadow adds one or more shadows to the box.

This property is a comma-delimited list of shadows, each of which is specified by a 2-4-length value, an optional color value, and an optional inset keyword. The value of the omitted length is 0.


 

 
  
 
   
 
    
Value
 
    
Meaning
 
   
 
   
 
    
H-shadow
 
    
Necessary. The position of the horizontal shadow. Negative values are allowed.
 
   
 
   
 
    
V-shadow
 
    
Necessary. The position of the vertical shadow. Negative values are allowed.
 
   
 
   
 
    
Blur
 
    
Optional. Blur distance.
 
   
 
   
 
    
Spread
 
    
Optional. The size of the shadow.
 
   
 
   
 
    
Color
 
    
Optional. The color of the shadow.
 
   
 
   
 
    
Inset
 
    
Optional. Changes the outer shadow (outset) to an inner shadow.
 
   
 
  

 
After looking at the meaning of each attribute value, we can know the shadow effect set in the above example, the four property values following the Box-shadow property are: H-shadow, V-shadow, Blur, and color.

CSS has a lot of good-looking effects can be achieved, want to learn more about the CSS shadow effect of the content can refer to the PHP Chinese web CSS3 The latest version of the reference manual

CSS3 Latest Version Reference manual