HTML--CSS3 Learning

CSS3 border

Three tags: Border-radius,box-shadow,border-image;border-radius you can set rounded corners, respectively, upper left, upper right, bottom left, and bottom right. Box-shadow set Shadow, horizontal shadow, vertical, blur, color, use exception:

box-shadow:0 4px 8px 0 rgba (0, 0, 0, 0.2), 0 6px 20px 0 rgba (0, 0, 0, 0.19);

Set Card effects

。 Border-image set picture borders, border size, and picture fill Repeat,round,stretch.

Background

Background-image set the background image, you can set more than one, the first one on the top display

Background-size Background Image size

Background-orgin Content-box,padding-box,border-box, where the background image is placed

Background-clip the drawing area of the background

Color Gradient Properties

Linear-gradient linear Gradient, can specify the direction, default from top to bottom, you need to set the initial color and end color, use RGB to set the transparency

Radial-gradient radial gradient, gradient outward from the center, default to Ellipse ellipse

Text effects

Text-shadow Text Shadow

Text-overflow text is out of the process, clip is clipped directly, ellipsis out of the section plus ellipsis

NewLine: Word-wrap:normal is equivalent to Word-break:keep-all, support line wrapping, but does not support the long word split line, Word-wrap:break-word, keep Noraml encounter hyphenation points such as punctuation, space, and other circumstances of the rules of line wrapping, And the long words beyond the length of the word or URL, such as truncation line wrapping, and word-break:break-all do not use word-breaking line rules, only according to long-distance, to achieve the corresponding length of automatic line wrapping

Font: @font-face font-family: Custom name src: Font reference file Font-weight: Font weight

2d/3d Conversion

Transform (2D): Pan: Translate (x, y) translates size from current position on x-axis y-axis

Rotation: rotate (deg) angle rotation

Scaling: Scale (width multiples, high magnification) wide-height reduction a certain multiple

Tilt: Skew (20deg,30deg) x tilt 20deg,y axis tilt 30deg

Matrix (), six parameters, including pan, rotate, indent, tilt four effects

Transform (3D): Tranlate3d (x, Y, z), Rotate3d (x,y,z,angle) scale (x, Y, z) 3D conversion, matrix () uses 16 values, 4x4 matrix

Transform-orgin: Can modify the position of the element being converted

Animation:

Transition: Set over effect, attribute name? Time + Time curve + start time (after two default ease,0, optional)

Transition-property Duration timing-function Delay

@keyframes creating key animations

Need to set initial and end style from to or 0% 100%, use percentile to set multiple effects

Animation-name Duration timing-function delay Iteration-count Play direction next time whether the reverse play-state is running or pausing the animation

Column

Column-count Split Columns Colum-gap the gap between columns column-rule-style:solid column border style colum-rule-width column border width colum-rule-color color Column-rule Three Abbreviated Item

After setting the Box-sizing:border-box, the width or height of the set is included pading and border, not just the box content

Resizing:both user-Adjustable width-height horizontal adjustable widths vertical adjustable height

Elastic box

Display:flex/inline-flex

Flex-direction Set spindle direction row transverse row-reverse horizontal Reverse column vertical direction cloumn-reverse reverse

Justify-content (Spindle): Flex-start flex-end Center Space-between justify Space-around scatter alignment

Align-items (Secondary axis): Flex-start flex-end Center baseline aligned with baseline stretch whether stretched

Flex-wrap:wrap line break

Align-content: Defines the alignment of a row, regardless of the single item Flex-start flex-end center Space-between justify Space-around Scatter

Order: can set negative numbers, according to the content, the item is sorted, the smallest row of the front

Auto: Set the remaining space position Margin:auto the remaining space is placed around item, and in the item play, the Margin-right:auto remaining space is placed to the right of item, item is displayed on the left

Flex: Automatically calculates the space occupied by item

Align-self: Setting the alignment of individual item

　　　

HTML--CSS3 Learning