What are the new features of CSS3? What are the new attributes? (Summarize)

The main purpose of this article is to summarize and introduce to you what are the new features of CSS3?

First of all, everyone should know what css is?

Simply put, CSS is a cascading style sheet, a computer language used to express file styles such as HTML or XML. And css3 is the latest CSS standard. As long as we can master the various style attributes of css and css3, I believe it will be easy for everyone to create beautiful and generous pages.

Since css3 is the latest standard of css, what are the new features of css3?

Below we combine simple code examples to summarize several important new features, namely new attributes!

1. RGBA and transparency

RGBA is an extension of the RGB color model. In essence, it also adds an alpha channel to the set element, that is, in addition to the three colors of red, green and blue, a channel representing transparency is also added, among which RGB The values ​​represent red, green, and blue respectively, while alpha values ​​range from 0 to 1 (one decimal place).

2. Background attribute

background-image: Set the background image of the element.

background-origin: Specifies the positioning area of ​​the background image.

background-size: Specifies the size of the background image.

background-repeat: Set whether and how to repeat the background image.

3. Word-wrap attribute

The word-wrap attribute allows long words or URL addresses to be wrapped to the next line.

Note: All major browsers support the word-wrap attribute.

Basic syntax:

word-wrap: normal|break-word;

4. text-shadow attribute

text-shadow attribute: Set a shadow to the text.

Text-shadow basic syntax:

text-shadow： 5px 5px 5px #FF0000;

The parameters respectively represent: horizontal shadow, vertical shadow, blur distance, shadow color;

5. font -face attribute

font-face attribute: define your own font

In the new @font-face rule, you must first define the name of the font (such as myFirstFont), and then Point to the font file.

6. border-radius attribute

border-radius attribute: It is an abbreviated attribute used to set four border-*-radius attributes.

Basic syntax:

border-radius: 1-4 length|% / 1-4 length|%;

Note: This attribute allows you to add rounded borders to elements!

7. border-image attribute

border-image: Specify the image as a border surrounding the div element

border-image basic syntax:

border-image: url(border.png) 30 30 round

8. box-shadow attribute

box-shadow attribute: Add one or more shadows to the box. (Box shadow)

box-shadow basic syntax:

box-shadow: 10px 10px 5px #888888

9. Media query

Media query defines two sets of css. When the browser Different properties are adopted when the size changes.

This article is a summary of several important attributes of the new features of CSS3. In our CSS interview questions, questions about the new features of CSS3 are also very common. I hope this article will be helpful to friends in need!

If you want to know more about css/css3 knowledge points, you can pay attention to PHP Chinese css video tutorial/css3 video tutorial, everyone is welcome to refer to and learn!

The above is the detailed content of What are the new features of CSS3? What are the new attributes? (Summarize). For more information, please follow other related articles on the PHP Chinese website!