CSS3 Example Tutorial: Using border

Article Introduction: proficiency in the use of Border-radius.

The purpose of this example: proficiency in the use of Border-radius

Related properties: Border-radius, linear-gradient, Box-shadow hint: ": Before" ": after", ie on after, before is not supported, please in Firefox, Opera, Chrome, try the tune! Requirements Browser: Firefox, opera, Chrome effect chart:

First look at the general steps: 1. Define class, draw a rectangle; 2. Use the Border-radius property to handle its fillet; 3. Create Curl angle using pseudo element; 4. Create the effect of a section gradient. Detailed steps First step: Define class, draw a rectangle:

<a class= "Docicon" href= "#" >document icon</a>

Note here: "Display" The default property value is "inline", so we want to use "block" property value to ensure that it is displayed correctly:

The linear-gradient here is the gradient effect setting. Add the shadow effect below and use the "Box-shadow" property to implement:

The Box-shadow here is the shadow effect setting. So far, we have completed the following effect, as shown in figure:



Part II: Using the Border-radius property to handle its fillet:Please click here to find out the definition and usage of Border-radius. Code:

As shown in figure:

Ps: Here to focus on the hint: Before is a pseudo class selector, only support Firefox, opera, Chrome. You may not understand the following two steps, this does not matter, I will write a detailed article for them. In this example, we just know that we have used ": Before" ": after" the two pseudo-class selector can be. Part III: Curl up the corner

First, add ": Before", we need to create a 15px rectangle and apply a background gradient:

 
 

  
  

  
. docicon:before {
  
  

  
Content: "";
  
  

  
Display:block;
  
  

  
Position:absolute;
  
  

  
top:0;
  
  

  
right:0;
  
  

  
width:15px;
  
  

  
height:15px;
  
  

  
Background: #ccc;
  
  

  
Background:-webkit-linear-gradient (45deg, #fff 0, #eee 50%, #ccc 100%);
  
  

  
Background:-moz-linear-gradient (45deg, #fff 0, #eee 50%, #ccc 100%);
  
  

  
Background:-o-linear-gradient (45deg, #fff 0, #eee 50%, #ccc 100%);
  
  

  
Background:-ms-linear-gradient (45deg, #fff 0, #eee 50%, #ccc 100%);
  
  

  
Background:linear-gradient (45deg, #fff 0, #eee 50%, #ccc 100%);
  
  

  
-webkit-box-shadow:rgba (0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;
  
  

  
-moz-box-shadow:rgba (0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;
  
  

  
Box-shadow:rgba (0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;
  
  

  
border-bottom:1px solid #ccc;
  
  

  
border-left:1px solid #ccc;
  
  

  
}
 
 

Next we want to achieve the effect of rounded corners in the upper right corner, we use the same method to align:

...

-webkit-border-radius:3px 15px 3px 3px;

-moz-border-radius:3px 15px 3px 3px;

border-radius:3px 15px 3px 3px;

Here's what we've achieved today:

Fourth Step: Add the article Gradient effect:

Below we use ": after" to achieve the effect, we show a high positioning 0,0. We apply the overall width of 60%, plus

Margin-left and margin-right 20% (i.e. 100%):

To implement multiple line gradients with CSS3:

Final results: