CSS3 basic knowledge and details

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 of the 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.

Note: This course does not support versions below IE9. It is recommended to use the highest version of chrome, safari, firefox, and opera browsers to learn this course.

What can CSS3 do?

What benefits does CSS3 bring us? Simply put, CSS3 can achieve many effects and even animation effects that previously required the use of images and scripts in just a few lines of code. For example, rounded corners, picture borders, text shadows and box shadows, transitions, animations, etc.

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


Fully backwards compatible with CSS3, so you don't have to change your existing design. Browsers will always support CSS2.

CSS3 Modules

CSS3 is split into "modules". Old specifications have been broken into small pieces and new ones have been added.

Some of the most important CSS3 modules are as follows:

Selector

Box model

Background and border

Text effects

2D/3D conversion

Animation

Multi-column layout

User interface

CSS3 Recommendation

The W3C CSS3 specification is still there development.

However, many new CSS3 properties are available in modern browsers.


Continuing Learning
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网</title> <style> div { width:100px; height:75px; background-color:pink; border:1px solid black; } div#div2 { transform:rotate(30deg); -ms-transform:rotate(30deg); /* IE 9 */ -webkit-transform:rotate(30deg); /* Safari and Chrome */ } </style> </head> <body> <div>这是一个 DIV 元素。</div> <div id="div2">这是一个 DIV 元素。</div> </body> </html>
submitReset Code