CSS3

1, What is CSS3

CSS3 is an upgraded version of CSS2. 3 is just the version number. It adds many powerful new features based on CSS2.1. At present, the mainstream browsers chrome, safari, firefox, opera, and even 360 already support most functions of CSS3. IE10 will also begin to fully support CSS3.

When writing CSS3 styles, different browsers may require different prefixes. It means that the CSS property or rule has not yet become part of the W3C standard and is a private property of the browser. Although newer versions of browsers currently do not require prefixes, prefixes are still indispensable for better forward compatibility

2. What can CSS3 do?

What benefits does CSS3 bring us? Simply put, CSS3 can achieve effects that previously required the use of images and scripts, and even animation effects, with just a few lines of code. Such as rounded corners, picture borders, text shadow and box shadow, transition, animation, etc.

CSS3 simplifies the design process for front-end developers and speeds up page loading.

What are the powerful functions of CSS3? Friends, let’s take a look first

Selector

In the past, we usually used class, ID or tagname to select HTML elements. CSS3 selectors are incredibly powerful. They can reduce the number of classes and IDs in tags, make it easier to maintain style sheets, and better achieve the separation of structure and performance

Circle Corner effect
In the past, background images or tedious elements were used to make rounded corners. Now it’s very simple. border-radius can help you do it easily.

block Shadow and text shadow
You can add shadow effects to any DIV and text

Color CSS3 supports more colors and a wide range of Color definition. The new color CSS3 supports HSL, CMYK, HSLA and RGBA

Gradient effect Image gradient effects that could only be made with Photoshop before can now be written with CSS , filters in IE can also realize

Personalized fonts Are the fonts on the web page too single? Use @Font-Face to easily customize fonts

Multiple background images Add multiple layers of background images to one element

Border background image Border application background image

Deformation processing You can rotate and scale HTML elements , tilt, move, and even powerful animations that were previously only possible with JavaScript

Multi-column layout
allows you to do it without using multiple div tags Implement multi-column layout.

Media queries Apply different styles for different screen resolutions

and so on. .

CSS3 makes code simpler and more efficient. It can greatly improve work efficiency, create a more advanced user experience, and bring the interface design of web applications to a new level