CSS3 Knowledge Summary

Border

|------Box Fillet

|---------border-radius:5px/20%;

|---------border-radius:5px 4px 3px 2px; Top left, top right, bottom right, bottom left

|------Box Shadow Box-shadow:

|---------box-shadow:x Axis offset y-axis offset shadow blur radius (blur degree of shadow color) Shadow extension radius shadow color projection method
Note: Inset refers to the shadow inside the box, the default is outside, inset writes to the first or last parameter position, the other position is invalid

|---------value is 3, indicating the distance to the left, the upper side of the distance, the shadow color

|---------value is 4, which indicates the distance to the left, the upper side of the distance, the imaginary pixels, the shadow color

| A---------value of 5 indicates the distance to the left, the upper side of the distance, the imaginary pixel, the shadow color, whether it is displayed internally and inverts the color

|---------negative, in the opposite direction

Background

|------introduction of Background-image

|------Background Size Background-size

|---------Auto Default value, does not change size

|---------cover fill the entire outer container

|------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

|------------Bottom

|------------Left

|------------Right

|------------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;

Font

|------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 Its content will be wrapped to 200px word wrap if there is a long English word at the end of the line, it will be truncated.

|---------Word-break:break-word; If the end of the line is not wide enough to display the entire word, it automatically places the entire word on the next line without truncating the word.

Color 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

|------opcity: Range 0-1

Gradient Color

|------background-image:linear-gradient (to bottom, #fff, red); 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);

Image

|------picture rounded corners border-radius:50%; (oval setting)

|------Set the image as the responsive Max-width:100%;height:auto;

|------Picture Shadow Box-shadow

------Picture Filter Filter

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 the 3D conversion and the conversion: 2D conversion is only in the plane, the text can be seen and not in turn. The 3D conversion is equivalent to the mirror effect, and a rollover is carried out before and after space (involving the z-axis).

Transition

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

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

A new layout mode of elastic box CSS3

|------defined as a flexible box

|---------Display:flex; Consider browser compatibility issues

|------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

|---------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 is placed on a new line, and a row breaks inside the child. Wrap-reverse-Reverse Wrap arrangement

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

|---------Horizontal Alignment justify-content:

|---------Vertical Alignment 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

|---------Order Ordering

|---------margin Spacing

|---------align-self Axis Alignment

CSS3 Knowledge Summary