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

Today, the editor will share with you the relevant knowledge points about what attributes have been added to CSS3. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

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.

These are all the contents of the article "what attributes have been added to CSS3?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to 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.