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

In this article, the editor introduces "what is the css3 prefix" in detail, the content is detailed, the steps are clear, and the details are handled properly. I hope this article "what is the css3 prefix" can help you solve your doubts.

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;}

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;}

The border-radius property can be set in the order (upper left corner, upper right corner, lower right corner, lower left corner).

Css Code:

Border-radius:0 0 20px 30px

The attribute value of border-radius can also be a percentage.

● sets the fillet to a circle by setting the element's border-radius property to half the element's height and width.

The width and height of the rectangular element in the example are both 200px. By setting border-radius to 150px, the rectangular element becomes round.

Html Code:

Frowning coldly at the fingers of a thousand men, bowing his head like an ox.

Css Code:

Div.border-radius3 {width:200px; height:200px; border-radius:100px; background-color:green; color:white; text-align: center; margin:30px;}

Four css3 shadows

The box-shadow attribute allows my element to add a shadow effect.

When the box-shadow property is used, it must be set sequentially

Box-shadow:h-shadow v-shadow blur spread color inset

H-shadow: required, position of horizontal shadow. Negative values are allowed.

V-shadow: required, position of vertical shadow. Negative values are allowed.

Blur: optional, blur distance.

Spread: optional, shadow size.

Color: optional. The color of the shadow.

Inset: optionally, change the external shadow (outset) to the inner shadow. The default is outset.

Html Code:

To worry before the common people worries; to enjoy only after the people can enjoy

Css Code:

Div.box-shadow {width:300px; height:100px; background-color:#9ACD32; box-shadow:10px 10px # 8888888; margin:30px;}

In addition to color (color), the box-shadow element has two optional values, which are blur and spread

Negative values can also be used in box-shadow:

H-shadow: the shadow will be on the left side of the box

V-shadow: the shadow will be at the top of the box.

Blur: negative values are not allowed

Spread: negative values cause shadows to shrink.

After reading this, the article "what is the css3 prefix" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it yourself to understand it. If you want to know more about the article, please 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.