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

This article will explain in detail what are the new attributes of CSS3. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

CSS is used to control the style and layout of web pages.

CSS3 is the latest CSS standard.

Many new attributes have been added to CSS3. Let's analyze some of the new attributes:

1.CSS3 border:

Border-radius:CSS3 fillet border. Adding rounded rectangles in CSS2 is tricky. We have to use a different picture for each fillet. In CSS3, it is very easy to create a fillet. In CSS3, the border-radius property is used to create a fillet. Border:2px solid

Box-shadow:CSS3 border shadow. In CSS3, box-shadow is used to add shadows to the box. Box-shadow:10px 10px 5px # 888888

Border-image:CSS3 frame picture. With the border-image property of CSS3, you can use pictures to create borders. Border-image:url (border.png) 30 30 round

2.CSS3 background:

Background-size: the attribute specifies the size of the background image. Before CSS3, the size of the background picture was determined by the actual size of the picture. In CSS3, you can specify the size of the background image, which allows us to reuse the background image in different environments. You can specify the size in pixels or percentage. If the size is specified as a percentage, the dimension is relative to the width and height of the parent element.

Background-origin: the attribute specifies the location area of the background image. Background pictures can be placed in the content-box, padding-box, or border-box area.

3.CSS3 text effect:

Text-shadow: in CSS3, text-shadow can apply shadows to text. Text-shadow:5px 5px 5px # FFFFFF

Word-wrap: if the word is too long, it may not go beyond a certain area. It is allowed to split the long word and wrap it to the next line: P {word-wrap:break-word;}.

4.CSS3 2D conversion:

Transform: with the CSS3 transformation, we can move, scale, rotate, stretch, or stretch elements.

Translate (): the element moves from its current position, based on the given left (x coordinates) and top (y coordinates) position parameters: transform:translate (50px focus 100px); the value translate (50px focus 100px) moves the element 50 pixels from the left and 100 pixels from the top.

Rotate (): the element rotates clockwise at a given angle. Negative values are allowed and the element rotates counterclockwise. Transform:rotate (30deg); the value rotate (30deg) rotates the element 30 degrees clockwise.

Scale (): the size of the element increases or decreases, converting the width to twice the original size and the height to four times the original height, based on the given width (X axis) and height (Y axis) parameters: transform:scale (2p 4); the value scale (2p 4) converts the width to twice the original size and the height to 4 times the original height.

Skew (): the element rotates 30 degrees around the X axis and 20 degrees around the Y axis according to the given horizontal line (X axis) and vertical line (Y axis) parameters: transform:skew (30 deg); the value skew (30 degg) rotates the element 30 degrees around the X axis and 20 degrees around the Y axis.

Matrix ():

The matrix () method combines all the 2D transformation methods together.

The matrix () method takes six parameters, including mathematical functions that allow you to rotate, scale, move, and tilt elements.

5.CSS3 3D conversion:

RotateX (): the element rotates in a given degree around its X axis. Transform:rotateX (120deg)

RotateY (): the element rotates in a given degree around its Y axis. Transform:rotateY (120deg)

6.CSS3 transition: adds an effect to an element when it changes from one style to another.

7.CSS3 Animation: with CSS3, we can create animations, which can replace animated images, Flash animations, and JavaScript in many web pages.

8.CSS3 multiple columns:

Column-count: the attribute specifies the number of columns that the element should be separated from.

Column-gap: the attribute specifies the interval between columns.

Column-rule: the property sets the width, style, and color rules between columns.

9.CSS3 user interface:

Resize: the attribute specifies whether the element can be resized by the user.

Box-sizing: attributes allow you to define specific content that fits into an area in an exact way.

Outline-offset: the property offsets the outline and draws the outline beyond the edge of the border.

This is the end of this article on "what are the new attributes of CSS3?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.