New features of CSS3

Text effects

1) word wrap

In CSS3, word-wrap retrieves words whose current line exceeds the bounds of the specified container and splits them. All major browsers support the word-wrap attribute. p { word-wrap:break-word; }

(2) the text – overflow

Text-overflow specifies how the current line should be displayed if it exceeds the bounds of the specified container. It works with word-wrap, with “clip” and “ellipsis” options for “text-overflow” properties.

  1. Clip: Do not display ellipsis tags (…) , but a simple cut
  2. Ellipsis: Display ellipsis flags when text within an object overflows (…)

(3) the text – shadow

In CSS3, text-shadow applies a shadow to text. Can specify horizontal shadows, vertical shadows, blur distance, and shadow color.

h1{ text-shadow: 5px 5px 5px #FF0000; }

(4) the text – decoration

CSS3 now supports deeper rendering of text, with three properties to set:

2. Text-stroke-color: set the text border color. 3. Text-stroke-width: set the text border width

Border effect

CSS3 has three new border attributes: border-radius, box-shadow, and border-image. Border-radius creates rounded borders, box-shadow adds shadows to elements, and border-image draws borders using images. IE9+ supports the border-radius and box-shadow attributes. Firefox, Chrome, and Safari support all the new border attributes.

background

CSS3 added the background property:

  • Background-clip: Use this property to set the background color or image coverage.
  • Background-origin, used to determine the position of the background, is usually used in conjunction with background-position. Background-position can be calculated from border, padding, and content (just like background-clip)
  • Background-size adjusts the size of the background image

The gradient

CSS3 has new gradients, including Linear-gradient and radial gradient, which are often used with 2D transformations.

The Transition, the Transform and Animation

These three features are new to CSS3 and are related to animation.

Transition

Transition adds effects to elements as they change from one style to another

  • Transition-property: Specifies the name of the CSS property that applies the transition.
  • Transition-duration: specifies how long it takes to complete the transition effect.
  • Transition-delay: specifies when the transition effect starts. The default value is 0.
  • Transition-timing-function: specifies the time curve of transition effects. The default value is “ease”. There are also linear, ease-in, ease-out, ease-in-out, and cubic- Bezier transition types.
  • Transition: Short for setting four transition properties in a property.

Transform

Transform is used to apply various 2D and 3D transformations to elements. This property allows us to rotate, scale, move, or tilt elements. Translate (x,y): Defines the 2D shift conversion. Scale (x,y): Defines 2D scale transformations. Rotate (Angle): Defines 2D rotation and specifies the Angle in the parameters. Skew (x-Angle,y-angle): Defines 2D skew conversions along the x and y axes. Translate3d (X, Y, Z): Defines 3D shift conversion. Scale3d (x, Y,z): Defines 3D scaling transformations. Rotate3d (x,y,z, Angle): Defines 3D rotations.

Animation

Animation requires two steps to produce animation effects. First, the animation is declared with the keyframe, and then the animation calls the animation keyframe with the syntax @keyframes, followed by the animation name animation-name.

@keyframes test{
    100%{background-color: black; }60%{background-color: lightgray; }30%{background-color: lightgreen; }0%{background-color: lightblue;}
}
div{
    width: 300px;
    height: 100px;
    background-color: pink;
    animation-name: test;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
Copy the code

Media queries

Using @media queries, you can define different styles for different media types. @Media can be set to different styles for different screen sizes, especially if you need to set up responsive pages. When you resize the browser, the page will also be rerendered according to the width and height of the browser.

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue; }}Copy the code

The fonts icon

Font face, the introduction of font ICONS, in development we often use a variety of ICONS, in order to save resources, you may not design their own ICONS, at this time you can get through the font icon website.

Flexible layout Flex

Flex, short for Flexible Box, is designed to provide maximum flexibility to boxed models.

  • Flex-direction determines the direction of the main axis (that is, the alignment of items).
  • Flex-wrap defines how to wrap a line if an axis does not fit.
  • The flex-flow property is a short form of the flex-direction and flex-wrap properties. The default value is Row Nowrap.
  • The context-content attribute defines the alignment of items on the main axis.
  • The align-items property defines how items are aligned on the cross axis.
  • The align-content property defines the alignment of multiple axes. This property has no effect if the project has only one axis.

Box-sizing

Box-sizing :borderbox It is used to add padding and border without enlarging the box, that is, any padding and border specified by the element will be drawn within the specified width and height. The width and height of the content are obtained by subtracting the border and inner margin from the specified width and height, respectively.