Introduction of several new technologies in CSS3

Web page Production WEBJX article introduction: Web Teaching network will show you in this article 5 interesting new technologies in CSS: rounded corners, individual fillets, opacity, shading, and resizing elements. CSS is a well-known and widely used website-style language, and in its version three (CSS3) program, new
The Scripting House will show you 5 interesting new technologies in CSS in this article: rounded corners, individual fillets, opacity, shading, and resizing elements.
CSS is a well-known and widely used website-style language, and in its version three (CSS3) plan, there are new features that save time. Although only the latest browser version is currently available to support these effects, it is necessary and interesting to know about them. The Scripting House will show you 5 interesting new technologies in CSS in this article: rounded corners, individual fillets, opacity, shading, and resizing elements.
Related article: Introduction to CSS3 Use Tips 5 1: Basic tags

Before we start this tutorial, let's create the basic markup that will be used throughout the tutorial.
Our XHTML needs a P element: #round, rounded corners are implemented using the CSS3 code. #indie, apply a few rounded corners individually. #opacity to show how the new CSS3 implements the opacity. #shadow, use CSS3 to achieve a shadow effect without using Photoshop. #resize, shows how to use some kind of CSS to achieve the effect of resetting the size.
In summary, our XHTML should look like this:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Below to create a basic CSS file:

Body {background-color: #fff;} #wrapper {width:100%;height:100%;} p {width:300px;height:300px;margin:10px;float:left;}
As you can see above, we give each P element 300px width and height, and let them float to the left, the entire page of P is left for us to add style to the work behind. See this information, that the article originates from the script house www.jb51.net, if the article is not complete, please go to the script home jb51.net Browse! 2: Rounded Corners

For now, there are a lot of ways to create rounded corners, but they are cumbersome. The most common method: First, you create a rounded picture, and then you create a lot of HTML elements and use the background image to display the rounded corners. I know exactly what the process is.
This problem will be solved very simply in CSS3, which is called the "Border-radius" attribute. Let's start by creating a black P element and setting a black border for him. A border is a precondition for the effect of the "Border-radius" attribute.
Like this:

#round {background-color: #000; border:1px solid #000;}
Now that you've created the P element, it looks exactly the way you expect it to, and the 300px and the tall are angled and black. Let's add the code that implements the fillet, which is so concise that it only requires two lines of code.

#round {background-color: #000; border:1px solid #000;-moz-border-radius:10px;-webkit-border-radius:10px;}
Here we add two lines of similar code,-moz-for the Firefox browser, and-webkit-for the Safari/chrome browser.
Note: The IE browser does not support the Border-radius attribute so far, so if you want IE to have rounded corners, you will have to add fillets separately.
Border-radius This attribute literal is the meaning of the border radius, just like Photoshop, the larger the value, the bigger the fillet.

"Recommended"

1. CSS3 Free Video Tutorial

2. Share 22 help tools for H5 and CSS3

3. What is CSS3?

4. A detailed example of a selector in CSS3

5. Integration of 20 CSS/CSS3 Common Properties