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

This article mainly introduces "css3 prefix case analysis". In daily operation, I believe many people have doubts about css3 prefix case analysis. The editor consulted all kinds of data and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "css3 prefix case analysis". Next, please follow the editor to study!

A brief introduction to css3

Css3 is the latest standard of css.

Css3 is backward compatible with earlier versions of css.

Some important new features:

Border radius: allows us to fillet elements.

Border images: allows us to specify an image as the border around the element.

Multiple backgrounds: apply multiple backgrounds to elements.

Animation (animations) and special effects (effects), and more new features.

Box shadow (Box Shadow)

Using the box-shadow property, you can attach one or more shadows to an element by specifying color, size, blur, and offset.

Gradients (gradient)

The css3 gradient allows us to set the background color of the element to a gradient. There are two types of gradients available: linear (linear) and radial (radial).

Transform (conversion)

With css3 transformation, we can move, scale, and, in turn, rotate and stretch elements. Some animation effects are achieved by changing the attributes of the element.

Animation (Animation)

We can create animations in css3, which can replace many web animated images, flash animations and JavaScripts.

Two css3 (browser) prefix

The css prefix is used to distinguish and be compatible with the support of major browsers for new css features.

For example, Safari and Chrome are prefixed with-webkit.Chrome,Safari and Mozilla currently supports the border-radius attribute, which takes effect with a browser prefix.

Html Code:

The sun is always after the wind and rain

Css Code:

Div.-webkit-border-radius {border:1px solid green; padding:20px; margin:20px;-webkit-border-radius: 24px;}

The effect is as follows:

By adding a prefix, you can make css styles effective in unsupported browsers. Sometimes in order to be compatible with more browsers, you may need to repeatedly define the same style attribute and add different prefixes.

The prefix for each browser is as follows:

Firefox-moz-

Safari-webkit-

Chrome-webkit-

Opera-o-

Ie-ms-

● to make the style compatible with various browsers, the prefix may be written repeatedly, but this is only short-lived. With the continuous improvement of the browser, it will gradually be compatible with all new styles. In this way, there is no need to use prefix writing to be compatible.

Three css3 fillet

You can set rounded corners to any element through the border-radius attribute

Html Code:

If you read too much, your appearance will change naturally.

Css Code:

Div.border-radius {border-radius:20px;background-color:green;color:white; margin:20px;}

At this point, the study of "css3 prefix instance analysis" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.