CSS3 Knowledge Summary

Border

|---box fillet border-radius

|---box Shadow box-shadow:

Background

|---Introduction of background background-image

|---background size background-size

|---background tile background-repeat

|---background position

|-----position Positioning 1 (background-origin)

|------by text location: Content-box

|------by Border Position: Border-box

|------based on internal margin position: Padding-box

|------Use this property, you must set the background to No-repeat

|-----position Positioning 2 (background-position)

|------Top RIHGT Bottom left;background-position: How many from left to right

|---Multiple backgrounds: Comma split: Background-image:url (images/bg_flower.gif), url (images/border.png);

Background-repeat:no-repeat;

Text

|---text shadow: Text-shadow: Three values: The left side of the distance, the upper side of the distance, the shadow color shadow will display the text

Text-shadow: Four values: The left side of the distance, the upper side of the distance, the degree of blur and the shadow color

|---text Overflow property

|-----overflow:hidden; White-space:nowrap the text to force no line break to set both properties first

|-----text-overflow

|------Clip: Trim text.

|------Ellipsis: Display ellipses to represent trimmed text

|------Custom (STRING): Define the symbol yourself, given the string to represent the trimmed text

|---text Wrap property word-break:

|-----word-break:break-all Content length to 200px when the line wraps. If the last is a full long word, it will truncate the word

|-----word-break:break-word; Will put the last word to the beginning of the next line completely

Color of RGBA and transparency opcity

|---R: red G: Green B: Blue Alpha: Parameters of transparency

|---The range of RGB is 0~255/0~100% alpha value range is 0~1 not negative

|---Transparency opcity: range of values 0~1

Gradient Color

|---background-image:linear-gradient (to bottom, #fff, red);

|---Description: parameter description: The first parameter specifies the direction of the gradient to Top,to bottom,to right,to left,to top left ...
Second and third parameters: is to specify that the start and end color values can have multiple colors background-image:linear-gradient (to bottom, #fff, black,red);

Rotating

|---2D

|-----Transform:

|------rotate ()--to rotate, the parentheses write the rotation angle, the default clockwise rotation. Allow negative values and the elements will be rotated counterclockwise

|------translate ()-moves from the current position with an X, Y value in parentheses. Allow negative values to move in the opposite direction
Transform:translate (30px,30px): Right 30px, down 30px move, original position saved

|------scale ()--Changes the original size, in multiples, the width, the height in multiples of the brackets
Transform:scale (2,4): Width becomes twice times, height becomes 4 times times

|------skew ()--torsion in horizontal and vertical direction, horizontal twist angle, vertical twist angle in brackets
Transform:skew (30deg,0deg); Will twist the 30 degree div horizontally, the inner text will follow the twist
Transform:skew (0deg,30deg); The 30-degree div will be rotated vertically, and the inner text will follow the twist
Transform:skew (30deg,30deg); a div with a horizontal twist of 30 degrees and a longitudinal twist of 30 degrees, the inner text will follow the twist

|---3D

|-----Transform

|------Rotatex ()--vertical rollover along the horizontal x-axis, with parentheses written in degrees of rotation

|------Rotatey ()--horizontal rollover along the vertical y-axis, with parentheses written in degrees of rotation

|---The difference between 2D and 3D

|-----The difference between 2D conversion and 3D conversion: The 2D conversion is only the plane, the text can be seen and not in turn
The 3D conversion is equivalent to the specular effect, and the rollover is carried out before and after space (involving the z-axis).

Excessive

|---Transition: specifically dealing with changes in color, length, width, position, etc.

               #aaa{            width:200px;             Height: 200px;             Border: 1px solid red;             transition:2s;        }         #aaa: hover{            width: 500px;        }

The effect is that after you move the mouse over the box, the process zooms in

Animation

|---1, @keyframes rules are used to create animations. When you specify a CSS style in @keyframes, you can create an animated effect that changes from the current style to the new style.
2, the use of animation animation bundle. Two values: Animation name, duration
3, we generally use 0%~100% to specify the timing of the animation. Or use the keyword from...to ..., the effect is equivalent to 0%~100%.
4, plus a infinite value can be infinitely executed
5, ease--By default start slowly accelerate, end slowly slow down.
linear--always runs at the same speed by default.
alternate--Alternate Execution (can also be a positive and negative execution)

Div{width:300px;Height:300px;background:Black;position:relative;/*The position attribute is added due to the need for positional changes*/Animation:Myfirst 5s Infinite Alternate;/*Animation bundle, two values, animated name, duration, plus an infinite execution, alternating execution*/}@keyframes Myfirst{/*change position and background color*/0% {background:Red;Border-radius:90px;Box-shadow:-35px 0px 15px Gray; Left:0px;Top:0px;}25%{background:Yellow;Border-radius:0px; Left:400px;Top:0px;}50%{background:Blue;Border-radius:90px; Left:400px;Top:300px;}75%{background:Green;Border-radius:0px;Box-shadow:0px 30px 15px Gray; Left:0px;Top:300px;}100%{background:Red;Border-radius:20px; Left:0px;Top:0px;}}

Elastic box

|---A new layout mode for CSS3.

|-----display:flex; Consider browser compatibility issues: defined as elastic box

|-----the position of the elastic child elements in the parent container (Landscape, Portrait)

|------flex-direction

|-------row: Horizontal left-to-right (left-aligned), the default arrangement.

|-------Row-reverse: Reverses the horizontal arrangement (right-aligned, from rear to front, and last to the front.)

|-------column: vertical arrangement.

|-------column-reverse: Reverse the vertical arrangement, from the back to the front row, the last item on the top.

|-----the wrapping of child elements in a flexible box

|------Flex-wrap:nowrap-By default, the elastic container is a single line. In this case, the elastic child may overflow the container.
Wrap-The elastic container is multi-line. In this case, the part of the Flex child overflow will be placed on a new line, and a break will occur inside the child.
Wrap-reverse-Reverse Wrap arrangement

|-----The alignment of the elastic child elements in the parent container

|------Horizontal alignment: justify-content:

|------longitudinal to it: align-items:

|-----How elastic child elements allocate space

|------Flex:

{    display: flex;     width: 400px;     height: 250px;}  {    flex: 2;}  {    flex: 1;}  {    flex: 1;}

|-----properties of CHILD elements

|------Sort: Order

|------margin: margin

|------longitudinal axis alignment: align-self

CSS3 Knowledge Summary