Shulou(Shulou.com)06/01 Report--

This article mainly shows you "how to use CSS3 to achieve fillet, shadow, transparency", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use CSS3 to achieve fillet, shadow, transparency" this article.

1. Fillet

There are two ways to realize fillet in CSS3.

The first is the background image, the traditional CSS can only have one background image per element, but CSS3 can allow an element to have multiple background images. In this way, you can fillet an element by adding four background images of 1 stroke and 4 circles, which are located on four corners.

The code is as follows:

.box {

/ * first define the four images to be used as background images * /

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

Url (/ img/top-right.gif)

Url (/ img/bottom-left.gif)

Url (/ img/bottom-right.gif)

/ * then define not to repeat display * /

Background-repeat: no-repeat

No-repeat

No-repeat

No-repeat

/ * finally, four images are defined to be displayed on four corners * /

Background-position: top left

Top right

Bottom left

Bottom right

}

The second method is concise, directly implemented in CSS, without the need for pictures.

The code is as follows:

.box {

/ * just define the radius of the fillet directly * /

Border-radius: 1em

}

However, the second method is not well supported. Currently, Firefox and Safari (or Chrome with the same core) need to use prefixes.

The code is as follows:

.box {

-moz-border-radius: 1em

-webkit-border-radius: 1em

Border-radius: 1em

}

two。 shadow

The box-shadow property of CSS3 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 four parameters of this property are: vertical offset, horizontal offset, width of projection (blur), color

3. Transparent

CSS originally supports transparency, browsers other than IE are opacity properties, and IE is filter:alpha. However, the drawback of this transparency is that it causes the content of the application element to inherit it, such as having a DIV

The code is as follows:

>

Content

If the background of the DIV as above is transparent, but the content is also transparent, you can use RGBa.

Copy the code

The code is as follows:

.alert {

Rgba (0. 0. 8)

}

The first three attributes of this attribute represent red, green and blue, and the fourth is transparency. Red, green and blue all represent black, so rgba sets the transparency of black to 0. 8.

CSS3 makes the effect that is difficult to achieve very simple. I hope all browsers can support CSS3 perfectly as soon as possible.

The above is all the contents of this article entitled "how to use CSS3 to achieve fillet, Shadow and Transparency". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.