What are the new attributes in css3

The new properties of css3 include: word-wrap, word-break, text-shadow, border-radius, box-shadow, border-image, background-size, transform, transition, etc.

The operating environment of this tutorial: Windows 7 system, CSS3 version, Dell G3 computer.

css3 new attributes

1. CSS3 text effect:

• hanging-punctuation: Specifies whether punctuation characters are located outside the wireframe.
  

• punctuation-trim: Specifies whether to trim punctuation characters.

• text-align-last: Sets how to align the last line or the line immediately before a forced newline.

• text-emphasis: Applies an emphasis mark and the emphasis mark's foreground color to the element's text.

• text-justify: Specifies the alignment method used when text-align is set to "justify".

• text-outline: Specifies the outline of the text.

• text-overflow: Specifies what happens when text overflows the containing element.

• text-shadow: Adds a shadow to text.

• text-wrap: Specifies the line wrapping rules for text.

• word-break: Specifies the line breaking rules for non-Chinese, Japanese and Korean text.

• word-wrap: Allows long indivisible words to be split and wrapped to the next line.

2. CSS3 border:

• border-radius: CSS3 rounded border.

• box-shadow: Used to add a shadow to the box.

• border-image: CSS3 border image, you can use images to create borders.

3. CSS3 background:

• background-size: The attribute specifies the size of the background image.

• background-origin: The attribute specifies the positioning area of ​​the background image.

• background-clip: Specifies the drawing area of ​​the background.

(Learning video sharing: css video tutorial)

4. CSS3 conversion:

• transform Applies a 2D or 3D transformation to an element.

• transform-origin allows you to change the position of the element being transformed.

• transform-style specifies how nested elements are displayed in 3D space.

• perspective Specifies the perspective effect of 3D elements.

• perspective-origin specifies the bottom position of the 3D element.

• backface-visibility Defines whether the element is visible when not facing the screen.

5. CSS3 transition:

Add effects to elements when they transform from one style to another.

• transition: shorthand attribute, used to set four transition attributes in one attribute.

• transition-property: Specifies the name of the CSS property that applies the transition.

• transition-duration: Defines how long the transition effect takes. The default is 0.

• transition-timing-function: Specifies the time curve of the transition effect. The default is "ease".

• transition-delay: Specifies when the transition effect starts. The default is 0.

6. CSS3 animation: Through CSS3, we can create animations, which can replace animated images, Flash animations and JavaScript in many web pages.

• @keyframes: Specifies animation.

• animation: Shorthand property for all animation properties, except animation-play-state property.

• animation-name: Specifies the name of the @keyframes animation.

• animation-duration: Specifies the seconds or milliseconds it takes for the animation to complete one cycle. The default is 0.

• animation-timing-function: Specifies the speed curve of animation. The default is "ease".

• animation-delay: Specifies when the animation starts. The default is 0.

• animation-iteration-count: Specifies the number of times the animation is played. The default is 1.

• animation-direction: Specifies whether the animation plays in reverse in the next cycle. The default is "normal".

• animation-play-state: Specifies whether the animation is running or paused. The default is "running".

• animation-fill-mode: Specifies the state outside the object animation time.

7. CSS3 multiple columns:

• column-count: Specifies the number of columns by which elements should be split.

• column-fill: Specify how to fill the column

• column-gap: Specify the gap between columns

• column-rule: Abbreviation for all column-rule-* attributes

• column-rule-color: Specifies the color of the border between two columns

• column-rule-style: Specify the style of the border between two columns

• column-rule-width: Specify the thickness of the border between two columns

• column-span: Specify how many columns the element spans

• column-width: Specify the width of the column

• columns: abbreviation for setting column-width and column-count

8. CSS3 user interface:

• resize: The attribute specifies whether the element can be resized by the user.

• box-sizing: Property allows you to define in an exact way how specific content will be adapted to a certain area.

• outline-offset: Property offsets the outline and draws the outline beyond the edge of the border.

• appearance: Allows you to make an element look like a standard user interface element.

• icon: Provides creators with the ability to set elements to their icon equivalents.

• nav-down: Specifies where to navigate when using the arrow down navigation key.

• nav-index: Specifies the order of the Tabs of an element.

• nav-left: Specifies where to navigate using the left arrow navigation keys.

• nav-right: Specifies where to navigate using the right arrow navigation keys.

• nav-up: Specifies where to navigate when using the Arrow Up navigation key.

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of What are the new attributes in css3. For more information, please follow other related articles on the PHP Chinese website!