CSS3 rounded corners, shadow, transparent_html/css_WEB-ITnose

There are many ways to achieve rounded corners, shadows, and transparency in CSS. The traditional methods are more complicated. It is much more convenient to use CSS3. Although the support of CSS3 by various browsers is not very good now, CSS3 will be popular in the near future.

1. Rounded corners

There are two ways to implement rounded corners in CSS3.

The first is the background Image, traditional CSS can only have one background image for each element, but CSS3 can allow one element to have multiple background images. In this way, you can add 4 1/4 circle background images to an element, respectively located at the 4 corners. Rounded corners are achieved.

Html code

1. .box {
2. /* First define the 4 images to be used For the background image */
3. background-image: url(/img/top-left.gif),
4.                                                 > Url (/img/bottom- heft.gif),
5. url (/img/bottom-right.gif); 🎜> background-repeat: no-repeat,
6.                                                                                                                      4 pictures are displayed on the 4 corners */                                                                                                                                               bottom left,
7. bottom right;
8. }
10. The second method is simple and can be implemented directly with CSS without using images.
12. Html code
14. .box {
15. /* Just define the radius of the fillet directly */
16. border-radius: 1em;
17. }

But the second method is not well supported yet. Currently, Firefox and Safari (Chrome with the same core can also be used) need to use the prefix

Html code

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

}

2. Shadow

The box-shadow property of CSS3 can directly implement shadow

2. Html code
3. 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 four parameters of this attribute are: vertical offset, horizontal offset, and the width of the shadow (degree of blur), color

   3. Transparency

   CSS originally supports transparency. Browsers other than IE use the opacity attribute, and IE uses filter:alpha. But , this transparency has a disadvantage, that is, it will make the content of the application element also inherit it, such as a DIV,

   Html code

   1. >
   2. Content

If the background of the DIV is transparent like the above, but the two characters of the content are also transparent, you can use RGBa.

Html Code

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

The first three attributes of this attribute represent the colors red, green, and blue, and the fourth one is transparency. Red, green, and blue are all 0, which represents black, so rgba(0,0,0,0.8) sets the transparency of black to 0.8 .

CSS3 makes it easy to achieve effects that were originally difficult to achieve. I hope that all browsers will achieve perfect support for CSS3 as soon as possible.