box-shadow blur radius and extended radius

Box-shadow on the basic usage of see CSS3 box-shadow a chapter.

This property is used to set the shadow effect element, a syntax structure is as follows:

box-shadow:h-shadow v-shadow blur spread color inset;

The following examples describe the code by action blur (blur radius) and Spread (extended radius) parameters.

A blur radius:

blur parameter specifies the blur radius; W3C document does not specify which method to use fuzzy function.

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title> 
<style>
.box{
  margin: 40px 0;
}
.ant{
  background:red;
  width: 100px;
  height: 100px;
}
.one{
  box-shadow: 110px 0 0 green;
}
.two{
  box-shadow: 110px 0 20px green;
}
.three{
  box-shadow: 110px 0 40px green;
}
</style>
</head>
<body>
  <div class="box">
    <div class="ant one"></div>
  </div>
  <div class="box">
    <div class="ant two"></div>
  </div>
  <div class="box">
    <div class="ant three"></div>
  </div>
</body>
</html>

analyse as below:

(1) When there is no setting blur, shadow and element size are the same size.

(2) The set 20px or 40px blur when the size of the shadow significantly expanded.

(3) the fuzzy region, from the edge of the shadow is not provided blur, extended to the two ends; achieve vertical or horizontal gradient in the region similar to the blurring effect (similar to the above code is the gradient from the inside to the outside). 20px blur second setting value, then the edge is blurred shadow area when the line is not set to blur 10px extends on both sides separately, so the red and green shading element just adjacent adapters, various orientations are true.

For inwardly inset shadow effect is the same principle, see the following code:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title> 
<style>
.box{
  margin: 20px 0;
}
.ant{
  background:red;
  width: 100px;
  height: 100px;
}
.one{
  box-shadow: 0 0 0 20px green inset;
}
.two{
  box-shadow: 0 0 10px 20px green inset;
}
</style>
</head>
<body>
  <div class="box">
    <div class="ant one"></div>
  </div>
  <div class="box">
    <div class="ant two"></div>
  </div>
</body>
</html>

Screenshot operating results as follows:

Fuzzy region also extends along the edge produced when no blurring effect similar to the above-mentioned two ends.

Second extended radius:

spread parameter is better understood, it is directly increase the size of the shadow.

Code examples are as follows:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title> 
<style>
.box{
  margin: 40px 0;
}
.ant{
  background:red;
  width: 100px;
  height: 100px;
}
.one{
  box-shadow: 130px 0 0 10px green;
}
.two{
  box-shadow: 130px 0 20px 10px green;
}
.three{
  box-shadow: 130px 0 40px 10px green;
}
</style>
</head>
<body>
  <div class="box">
    <div class="ant one"></div>
  </div>
  <div class="box">
    <div class="ant two"></div>
  </div>
  <div class="box">
    <div class="ant three"></div>
  </div>
</body>
</html>

The above code is run effect shots are as follows:

spread parameters directly extended edge of the shadow, and then again with this new blur blur edges previously described as a standard.

In the above code, the size of the gap between the red and green elements are 20px shadow (the shadow extended outwardly 10px), and then applied to the blur of 40px, red and green shading element can be exactly adapter together.

box-shadow blur radius and extended radius

Guess you like