CSS3 in border

From the time I began to learn to do the Web page, the page used on the rounded corners are headaches, the first is to use a table, three rows of three dead, and then cut the fillet picture into 9 pieces respectively, hehe, now think of no language.

Back online again to find the CSS fillet code, 1 pixel 1 pixel of the rounded corners spell out, this time, I began to lazy, used a few times, then there is no language.

Now, I am more lazy, meet the effect of rounded corners, to make a picture with CSS set into a background, convenient and quick.

CSS3 here, there is a new technology, rounded corners of the effect let us no longer sad (don't worry!css3 has not officially released), now let us sneak peek at the next CSS3 in this powerful technology: Border-radius bar.

In CSS3, the rounded corners are border-radius, and their related properties are: Border-top-right-radius, Border-bottom-right-radius, Border-bottom-left-radius, Border-top-left-radius, although not fully finalized yet, many browsers have supported the tag. Mozilla's most typical representative: Firefox's-moz-border-radius and WebKit's Safari and Google Chrome-webkit-border-radius.

Here's a look at the different syntax for Border-radius in each browser:

CSS3	Mozilla	Webkit	Note
Border-radius	-moz-border-radius	-webkit-border-radius	Rounded corners of the whole
Border-topright-radius	-moz-border-topright-radius	-webkit-border-topright-radius	Top Right rounded corner
Border-topleft-radius	-moz-border-topleft-radius	-webkit-border-topleft-radius	Top left rounded corner
Border-bottomright-radius	-moz-border-bottomright-radius	-webkit-border-bottomright-radius	Lower right rounded corner
Border-bottomleft-radius	-moz-border-bottomleft-radius	-webkit-border-bottomleft-radius	Left Lower rounded corner

-moz-border-radius Use Method:

Here's how to use Border-radius in a Web page. Take-moz-border-radius For example, if it is safari, please install-moz-instead of-webkit-.

Syntax:-moz-border-radius:10px the rounded corners of the four edges are 10px.

Syntax:-moz-border-radius-topright:10px;-moz-border-radius-topleft:10px to upper right and upper left 10px.

Syntax:-moz-border-radius:10px 0; Border-radius also supports syntax abbreviations (upper left 10px/, upper right 0/lower left 0 10px/).

Syntax:-moz-border-radius:10px 40px; Border-radius also supports syntax abbreviations (upper left 10px/upper right 40px/lower right 10px/lower left 40px).

special effects of W Ebkit

-webkit-border-radius for rounded corners, but also to make shadow, rotation and other special effects. The good news is that Firefox 3.5 also supports this feature, as long as the-webkit change to-moz-can be used directly.

Syntax:-moz-box-shadow:1px 1px 5px Rgba (0,0,0,0.6); The first two values (1px) Set the displacement points, and the third value (5px) is the soft edge. Rgba to fill in the RGB three primary colors of the value. A is a transparent value (alpha) and 0.6 represents 60% transparent. If RGBA is not used, you can use the color code directly (#ffffff).

Grammar:-moz-transform:rotate ( -5DEG); Set the rotation angle of the fillet, positive is clockwise, negative is counterclockwise. Deg is the meaning of the angle.

FireFox3.5 New technology

FireFox3.5 version for rounded corners, a new feature. This new feature I'm not quite sure how to define him, you can think of it can be for a corner and then produce two kinds of fillet effect, please see the example details.

Grammar:-moz-border-radius:40px/10px; with/, you can have the rounded corner preceded by a 40px margin and a 10px margin.

Syntax:-moz-border-radius-topleft:40px 10px; -moz-border-radius-bottomright:40px 10px; You can set a specified corner with two rounded corners.

Syntax:-moz-border-radius:40px 10px 10px 40px/11px 21px 11px 21px; We can set it again for four different corners.

After playing these words, tired, also want to rest, but we have to sigh CSS3 strong place. Lord CSS3 comes more violently!!!