CSS3 fillet, shadow, transparent

CSS implementation of the round angle, shadow, transparent methods, the traditional methods are more complex, with CSS3 convenient many, although now the browser to CSS3 support is not very good, but in the near future CSS3 will be popular.

1. Rounded Corners

There are two ways to implement a fillet CSS3.

The first is the background image, the traditional CSS each element can have only one background image, but CSS3 can allow one element to have more than one background image. This adds 4 1/4-circle background images to an element that can be rounded at 4 corners.

HTML code

2. . box {
4. /* First define the 4 images to use as the background map */
6. Background-image:url (/img/top-left.gif),
8. URL (/img/top-right.gif),
10. URL (/img/bottom-left.gif),
12. URL (/img/bottom-right.gif);
14. /* Then define non-repeating display */
16. Background-repeat:no-repeat,
18. No-repeat,
20. No-repeat,
22. No-repeat;
24. /* Last definition 4 images shown in 4 corners */
26. Background-position:top left,
28. Top Right,
30. Bottom left,
32. bottom right;
34. }

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

HTML code

1. . box {
2. /* The radius of the fillet can be defined directly */
3. Border-radius:1em;
4. }

But the second method has not been well supported, and currently Firefox and Safari (the same core chrome can), need to use a prefix

HTML code

1. . box {
2. -moz-border-radius:1em;
3. -webkit-border-radius:1em;
4. Border-radius:1em;
5. }

2. Shadows

CSS3 's Box-shadow attribute can be used to directly implement shadows

HTML code

1. IMG {
2. -webkit-box-shadow:3px 3px 6px #666;
3. -moz-box-shadow:3px 3px 6px #666;
4. box-shadow:3px 3px 6px #666;
5. }

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

3. Transparent

CSS is originally support transparent, IE browser is opacity property, IE is filter:alpha. However, there is a drawback to this transparency, which is that it causes the content of the application element to inherit it, such as having a Div,

HTML code

1. <div style="Opacity:0.8;filter:alpha (opacity=80); Font-weight:bold; " >>
2. Content
3. </div>

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

HTML code

1. . alert {
2. RGBA (0,0,0,0.8);
3. }

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

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

CSS3 fillet, shadow, transparent