IE9 CSS3 A variety of new features

Inadvertently see the powerful features of CSS3, more interested in sharing the next first ... Oh

First you have to install IE9,,,,

If you haven't installed IE9 Beata, come here and try ...

Http://windows.microsoft.com/en-US/internet-explorer/download/ie-9/worldwide

Select the language and version,

or more than FireFox3.1 version, Opera9.5 version above. (I'm just testing under IE9).

1. Border-radius Properties:

A nice shape no longer needs image to be implemented. Let's see how to make a div appear irregular. And put some text in it. To use the Border-radius property in CSS3:

 
 

  
  

  
Div
  
  

  
{
  
  

  
Border:solid Black;
  
  

  
border-radius:40px;
  
  

  
height:1in;
  
  

  
width:2in;
  
  

  
Overflow:hidden;
  
  

  
}
 
 

div Display:

2.background-clip Properties:

Background=clip combined with Border-radius use, you can design a good shape.

Css:

Two div display:

3. Border-x-x-radius Properties

X represents Top,right,left,bottom, want to make the side has rounded angle can set X to which side, for example top-right is the upper right corner, Top-left is the upper left corner, ... , you can also add a percentage to set the display radian of the fillet.

Css:

Effect:

Div use of 4.background-clip+ parent-child structure

Css+html:

Effect:

5. Fillet text input Box

Css+html:

Effect:

6, CSS3 use the border property to draw the square:

Css+html:

is really very powerful, later many pictures can use CSS to replace ... And do not need to write so many CSS and JS for a rounded corner.

Original link: http://www.cnblogs.com/n-pei/archive/2010/12/10/1901757.html

"Edit Recommendation"