CSS3 rounded corner, shadow, transparent, and css3 rounded corner shadow

CSS3 rounded corner, shadow, transparent, and css3 rounded corner shadow

There are many methods for CSS to achieve rounded corners, shadows, and transparency. The traditional methods are complicated and it is much easier to use CSS3. Although various Browsers Do not support CSS3 well, but in the near future, CSS3 will become popular.

 

1. rounded corner

CSS3 provides two methods to achieve rounded corners.

The first type is the background image. In traditional CSS, each element can have only one background image, but CSS3 allows one element to have multiple background images. in this way, four background images with 1/4 circles can be added to an element, which are located at the four corners to achieve rounded corners.

Html code

1. . Box {
2. /* First define the four images to be used as the background image */
3. Background-image: url (/img/top-left.gif ),
4. Url (/img/top-right.gif ),
5. Url (/img/bottom-left.gif ),
6. Url (/img/bottom-right.gif );
7. /* Then define not to repeatedly display */
8. Background-repeat: no-repeat,
9. No-repeat,
10. No-repeat,
11. No-repeat;
12. /* Define the four images displayed on the four corners */
13. Background-position: top left,
14. Top right,
15. Bottom left,
16. Bottom right;
17. }

The second method is concise. It is implemented directly with CSS, and images are not needed.

Html code

1. . Box {
2. /* Define the radius of the rounded corner */
3. Border-radius: 1em;
4. }

However, the second method is not yet well supported. Currently Firefox and Safari (Chrome with the same core can also be used) require a prefix.

Html code

1. . Box {
2. -Moz-border-radius: 1em;
3. -Webkit-border-radius: 1em;
4. Border-radius: 1em;
5. }

 

2. Shadow

The box-shadow attribute of CSS3 can directly implement shadow.

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 four parameters of this attribute are vertical offset, horizontal offset, projection width (blur degree), and color.

 

3. Transparent

CSS originally supports transparency. browsers other than IE are the opacity attribute, While IE is the filter: alpha. however, this transparency has a disadvantage, that is, it will make the content of the application Element Inherit it, for example, there is 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 the DIV is transparent, but the content is transparent, you can use RGBa.

Html code

1. . Alert {
2. Rgba (0.8, 0 );
3. }

The first three attributes of this attribute are red, green, blue, and transparency. the values of red, green, and blue indicate black. Therefore, rgba (0.8, 0, 0.8) sets the black transparency.

 

 

CSS3 makes it very easy to achieve the previously difficult effect, and it is hoped that various browsers will provide perfect support for CSS3 as soon as possible.