Common CSS3 attribute sorting and css3 attributes

Common CSS3 attribute sorting and css3 attributes
Commonly used CSS3 attributes to organize text beyond partial collapse

white-space:nowarp;overflow:hidden;text-overflow:ellipsis

Word-warp

Line feed

• Normal default
• The break-word content will wrap in the boundary and will only be used for block objects. To use inline objects, you must set height, width, display: block, or position: absolute.

Word-break:

Process word breaking

• Normal uses the default line feed rule of the browser.
• Break-all allows line breaks in words
• Keep-all can only wrap lines with spaces or hyphens

White-space

White-space attribute settings)

• Normal default. Consecutive blank spaces are ignored by the browser
• Pre consecutive blank space will be retained by the browser (the original blank text will be retained, line feed)
• Nowrap text does not wrap until a label is encountered
• Pre-wrap retains the original text blank, but normal line feed
• Pre-line merges consecutive white spaces and intends to retain line breaks
• Inherit inherits from parent Element

Text-shadow

Text shadow

Text-shadow: X axis (X Offset) Y axis (Y Offset) Blur radius (Blur) Color (Color)

You can write multiple and separate them.

text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de;</br></br>

Border-radius

• Radius of the rounded cornerborder-radius:5px
• Angle ShrinkageBorder-radius: 50% // standard circle
• Set by diagonalBorder-radius: 5px (main diagonal) 25px (secondary diagonal );
• Set one by oneBorder-radius: 10px 20px 30px 40px (clockwise from top left );

Border-image

Source

border-image-source:url(image url);

Width

border-image-width: 1;

Repeat

Three repeat Methods: stretch compression or stretch the background image of border-image to adapt to the width of border-width. repeat simple duplicate round compression or stretch the background image of border-image to the minimum image unit. it just adapts to the width of border-width, repeat on this basis

Outset
The number of border image regions exceeds the border. The value is a multiple of border-image-width.

Border image setting Calculator
Http://border-image.com/

Boxbox-shadow

box-shadow:inset x-offset y-offset blur-radius spread-radius color

• Shadow Type: this parameter is an optional value. If no value is set, the default projection method is the outer shadow. If the unique value is inset, the outer shadow is converted into the inner shadow.

• X-offset: the horizontal offset of the Shadow. The value can be positive or negative. If the value is positive, the shadow is on the right of the object. If the value is negative, shadow on the left of the object

• Y-offset: the vertical offset of the Shadow. Its value can also be positive or negative. If it is a positive value, the shadow is at the bottom of the object. If its value is negative, shadow on the top of the object

• Shadow blur radius: this parameter is optional, but its value can only be positive. If its value is 0, it indicates that the shadow has no blur effect, the greater the value, the blurrier the shadow edge.

• Shadow extension radius: this parameter is optional. The value can be positive or negative. If the value is positive, the entire Shadow is extended. If the value is negative, the shadow is reduced.

Shadow color: this parameter is optional. If no color is set, the browser uses the default color, but the default color varies with browsers.

Box-sizing

Box-sizing can change the box Model

• Content-box: Standard box Model
  Width = content width
• Border-box: IE box Model
  Width = content width + paddingLeft + borderLeft + paddingRight + borderRight

Background multi-background

You can set multiple backgrounds by commas (,) and image offset.

background:url("haoroomsCSS1_s.jpg") 0 0 no-repeat,         url("haoroomsCSS2_s.jpg") 200px 0 no-repeat,         url("haorooms.jpg") 400px 201px no-repeat;

Background-size

• Length: sets the height and width of the background image. The first value sets the width and the second value sets the height. If only one value is set, the second value is set to auto.
• Percentage: Specify the width and height of the background image as the percentage of the parent element. The first value sets the width and the second value sets the height. If only one value is set, the second value is set to auto
• Contain scales the background image to fully load the background area. The background area may be partially blank.
• Cover scales the background image to completely overwrite the background area. The background image may not be visible.

Background-origin

Offset reference object

• Padding-box
• Border-box
• Content-box

Background-clip

Specifies the plotting area of the background.

• Padding-box
• Border-box
• Content-box
  </Br>
  </Br>

Gradient linear gradient

Linear-gradient ([<angle> | to <side-or-corner>,]? <Color-stop> [, <color-stop>] +) <side-or-corner> = [left | right] | [top | bottom] <color-stop> = <color> [<percentage> | <length>] // position where new colors appear

You can simply set the position of the gradient axis, set the color, and the position on the axis.

Radial Gradient

radial-gradient(  [ [ circle || <length> ]                         [ at <position> ]? , |    [ ellipse || [ <length> | <percentage> ]{2} ]  [ at <position> ]? , |    [ [ circle | ellipse ] || <extent-keyword> ]   [ at <position> ]? , |    at <position> ,  ]?  <color-stop> [ , <color-stop> ]+)where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side  and <color-stop>     = <color> [ <percentage> | <length> ]? 

By specifying the shape, center position, and color node of the image, you can complete a basic radiation. In parameters, graphic parameters are separated by spaces in order, and color nodes are separated by commas.
Radial Gradient generator http://www.colorzilla.com/gradient-editor/
</Br>
</Br>

Transition and animation transition

<single-transition> = [ none | <single-transition-property> ] || <duration time> || <single-transition-timing-function> || <delay time><single-transition-property> = all | <custom-ident><single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps( <integer> [, [ start | end ] ]? ) | cubic-bezier( <number>, <number>, <number>, <number> )

Change curve
The hacker is becoming more and more aggressive.
Linear Linearity
Slow-in slows down to linear
Linear-out to slow-out
Step-start is equivalent to a steps (10, start) animation that is divided into 10 steps. When the animation is executed, the left-side endpoint of the start is started.
Step-end is equivalent to a steps (10, end) animation that is divided into 10 steps. When an animation is executed, it starts with the end point. The default value is end.
Slow-in-out slows down to linear to slow out
Cubic-betiller custom besell Curve

Custom beiser curve generator http://cubic-bezier.com/

Animation

<single-animation>#where <single-animation> = <time> || <single-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]where <single-timing-function> = <single-transition-timing-function><single-animation-iteration-count> = infinite | <number><single-animation-direction> = normal | reverse | alternate | alternate-reverse<single-animation-fill-mode> = none | forwards | backwards | both<single-animation-play-state> = running | paused<keyframes-name> = <custom-ident> | <string>where <single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps( <integer> [, [ start | end ] ]? ) | cubic-bezier( <number>, <number>, <number>, <number> )

Define Animation

@ Keyframs keyname {} // set the key frame 0% {background: # c00;} 50% {background: orange;} 100% {background: yellowgreen;} div {animation: 1 s keyname infinite; // number of times of time animation name}

Animation-fill-mode

After the animation ends, the animation immediately jumps from the end state to the start state. If you want to keep the animation in the end state, you must use the animation-fill-mode attribute.
None: the default value. It is returned to the state when the animation is not started.
Forwards: Stop the animation
Backwards: returns the animation to the first frame.
Both: Apply forwards and backwards rules in turn based on animation-direction

Animation-direction

When an animation is played cyclically, it jumps from the end state to the start state and then starts playing. The animation-direction attribute can change this behavior.
Normal
Alternate
Reverse motion of reverse
Alternate-reverse

Deformation and 3D

Transform

Transform-origin

Change rotation center

Transform: translate ()

Translation
TranslateX (), translateY () can change a specific axis

Transform: scale ()

Zoom
ScaleX (), scaleY ()

Transform: skew ()

Transform: skewX (10deg), transform: skewY (10deg
Skew

Perspective

The larger the line of sight, the less obvious the 3D effect is.
Deformation, animation tools: http://isux.tencent.com/css3/tools.html

Perspective origin

Focus

Source: https://www.jianshu.com/p/72d100146c9c