IE9 CSS3 A variety of new features

Source: Internet
Author: User
Tags new features version

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:

 
 
  1. Div
  2. {
  3. Border:solid Black;
  4. border-radius:40px;
  5. height:1in;
  6. width:2in;
  7. Overflow:hidden;
  8. }

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"



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.