Use CSS3 to achieve rounded corners, shadows, and transparent

CSS to achieve rounded corners, shadows, transparent methods, a lot of traditional methods are more complex, with CSS3 more convenient, although now the support of the browser CSS3 is not very good, but in the near future CSS3 will be universal.

1. Rounded Corners

There are two methods for CSS3 to achieve fillet.

The first is the background image, traditional CSS each element can only have a background image, but CSS3 can allow an element to have multiple background images. This adds 4 1/4-round background images to an element, which can be rounded at 4 corners.

The code is as follows:

. box {

/* First define the 4 images you want to use as a background map * *

Background-image:url (/img/top-left.gif),

URL (/img/top-right.gif),

URL (/img/bottom-left.gif),

URL (/img/bottom-right.gif);

/* Then define no repeat display * *

Background-repeat:no-repeat,

No-repeat,

No-repeat,

No-repeat;

/* The final definition of 4 images is shown on the 4 corners respectively * *

Background-position:top left,

Top Right,

Bottom left,

bottom right;

}

The second method is simple, directly with the CSS implementation, do not need to use pictures.

The code is as follows:

. box {

/* Directly define the radius of the fillet can be * *

Border-radius:1em;

}

But the second approach has not been well supported, and current Firefox and Safari (as well as the same core of chrome) need to be prefixed with

The code is as follows:

. box {

-moz-border-radius:1em;

-webkit-border-radius:1em;

Border-radius:1em;

}

2. Shadows

CSS3 's Box-shadow properties can directly implement shadows

The code is as follows:

IMG {

-webkit-box-shadow:3px 3px 6px #666;

-moz-box-shadow:3px 3px 6px #666;

box-shadow:3px 3px 6px #666;

}

The 4 parameters for this property are: Vertical offset, horizontal offset, projection width (blur), color

3. Transparent

CSS is supposed to support transparent, ie browser is opacity properties, IE is filter:alpha. However, this transparency has a disadvantage, that is, it will make the content of the application element will also inherit it, such as a Div,

The code is as follows:

>

Content

If the background of the div like above is transparent, but the content two words are transparent, then you can use RGBA.

The code is as follows:

. alert {

RGBA (0,0,0,0.8);

}

The first 3 properties of this property represent the color red, green, blue, and the fourth is transparency. Red, green, and Blue are all 0 for black, so Rgba (0,0,0,0.8) is to set the transparency of black to 0.8.

CSS3 makes it very difficult to achieve the effect of the original is very simple, I hope that the browser to CSS3 as soon as possible to achieve the perfect support.