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)
value | instructions |
---|---|
h-shadow | Required, horizontal shadow position, allowing negative values |
v-shadow | Required, vertical shadow position, allowing negative values |
blur | Optional, blur the distance |
spread | Optional, shadow size |
color | Optional, shadow color. |
inset | Optionally, change the inner shadow of the shadow from the outer shadow (at the beginning) |
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