CSS3 study notes

CSS3 new features

• The selector
• The box model
• Background and border: border-radius, box-shadow, border-image
• Text effects: text-shadow, text-overflow, word-wrap, word-break
• 2D/3D transform: Move, scale, rotate, Stretch or stretch
• Animation: @ keyframes
• Multi-column layout: olumn-count (number of split columns) column-gap (column gap) column-rule (border style) column-width (column width)
• User interface: resize:both (from the user to adjust the size) box-sizing, outline-offset

Second, specific attributes

1, the background

• Background-image: A background image. Different background images are separated by commas (,). The image displayed at the top is the first one.
• Background-size: The size of the background image as a percentage of the width and height of the parent element;
• Background-origin: the position region of the background image; (the content – box | padding – box | border – box)

• Background-clip: Clipping the background from a specified position, the same as background-origin

2, border

Box-shadow: h-shadow V-shadow blur spread color inset (same as text-shadow)

border-radius

• Four values: the first value is the upper left corner, the second value is the upper right corner, the third value is the lower right corner, and the fourth value is the lower left corner.
• Three values: the first value is the upper-left corner, the second value is the upper-right and lower-left corner, and the third value is the lower-right corner
• Two values: the first value is upper left and lower right, and the second value is upper right and lower left
• One value: All corners have the same value

3. Text effects

• Text – overflow: text overflow attributes specified should show how the user the spill-over (clip shear | ellipsis ellipses)
• Word-wrap: break-word
• Word – break: word split line (keep – all the whole word wrap | break – words are all split)

4, the gradient

• Linear-gradient – down/up/left/right/diagonal
• Radial gradients – defined by their centers

/*direction indicates the direction, such as to right */
background-image: linear-gradient(direction, color-stop1, color-stop2, ...) ;/* Angle is the Angle between the horizontal line and the gradient line, such as 90deg*/
background-image: linear-gradient(angle, color-stop1, color-stop2);
/* Repeat gradient repeating-linear-gradient*/
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

/ * shape for the shape, circle | the ellipse (elliptic, default) * /
background-image: radial-gradient(shape size at position, start-color, ... , last-color);/* Repeat gradient repeating-radial-gradient*/
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
Copy the code

Multiple colors can be used to support transparency

5, conversion,

The 2 d transformation

• Translate () : Moves from the current element position based on the parameters given at the left (X-axis) and top (Y-axis) positions
• Rotate () : Given the degree clockwise rotation, negative values are allowed, which makes the element rotate counterclockwise
• Scale () : Increases or decreases the size, depending on the width (X-axis) and height (Y-axis) parameters
• Skew () : indicates the tilt Angle of the X and Y axes

3 d conversion

• Translate3d (X, Y, Z) : 3D transformation
• Scale3d (X, Y, Z) : 3D scaling conversion
• Rotate3d (x,y,z, Angle) : 3D rotation
• Perspective (n) : Perspective view of 3D transformation elements

6, transition

The effect of an element changing from one style to another

div {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s;
    -webkit-transition: width 2s;
}
div:hover {
    width: 300px;
}
Copy the code

To add the transformation effect of multiple styles, the added properties are separated by commas

7, animation,

The @keyframes rule specifies a CSS style and the animation will gradually change from the current style to the new style.

@keyframes myfirst {
    from {background: red; }to {background: yellow;}
}
@-webkit-keyframes myfirst{
    from {background: red; }to {background: yellow;}
}

div {
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s;
}

/* You can change any number of styles as many times as you want, using a percentage to specify when the change occurs */
@keyframes myfirst{
    0%   {background: red; }25%  {background: yellow; }50%  {background: blue; }100% {background: green;}
}
Copy the code

Other uses

1. Box model

Width + padding + border = actual width of the element

Height + padding + border = actual height of the element

Box-sizing allows you to set whether the width and height attributes include padding and border. By default, they do not.

• box-sizing: border-box; The padding and border are also included in width and height
• The box – sizing: content – box; Padding and border are not included in width and height

2. Elastic box

A layout that ensures that elements behave appropriately when a page needs to adapt to different screen sizes and device types. The elastic box layout model was introduced to provide a more efficient way to arrange, align, and allocate empty space among the children of a container.

Elastic box by elastic containers (Flex container) and elastic element (Flex item), set the display = Flex | inline – Flex containers define it as the elastic.

Flex layout

3. Multimedia query

Adaptive display based on Settings, media queries can be used to detect many things, such as:

• Viewport Width and height
• Width and height of the device
• Orientation (smartphone landscape, portrait).
• The resolution of the

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