CSS3 Advanced Style

---------text strokes/fills

Text-stroke:--px color; Stroke width Color

Text-fill-color:color; Fill Color

---------text Blur/Shadow

Text-shadow:--px--px--px color,--px--px--px color;

Horizontal position Vertical position shadow blur size shadow color can overlay

---------Background Shadow

Box-shadow:x (must write) y (must write) blur spread color inset/outset;

Horizontal (-right + left) vertical (-up + down) blur distance shadow size color inside/outside display

---------Multiple Shadows

Box-shadow:inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 3px 0px #1f3053, 0 4px 4px 1px #111111;

Inset/outset: Inside and outside Shadows

---------Background Transparency

Background:rgba (0-255, 0-255, 0-255, 0-); Background transparent bottom (not inherited)

opacity:0-1; Background transparent bottom (inheritance)

Filter:alpha (opacity=0-100); (Compatible notation)

---------Background Gradient

Linear-gradient: Linear gradient

Background:-webkit-linear-gradient (left, red, blue) to set multiple colors

(Direction left/top, 1 colors/start, 2 colors, 3 colors, ...) Multiple Yan/stop)

-webkit-: Browser support –moz--o-

Background:-webkit-linear-gradient (left, red--%, Blue--%)

Red--%: 1 color starting position 100% for red

blue--%: 2-color starting position 1%-bit blue

Blue: End color length is 100%-(red% + blue%)

Background:-webkit-linear-gradient (--deg, red, blue)

0deg– right 45deg– right upper 90deg– Upper 135deg-left top 180-left

0deg– right -45deg– right lower -90deg– lower -135deg-left bottom -180-left

Radial-gradient: Radial Gradient

Background:-webkit-radial-gradient (---px, red, blue, ...)

--PX: Focus distance (left position writable)

repeating-linear-gradient: repeating gradients

Repeating-radial-gradient: Repeat Path change

Repeating-radial-gradient (Circle Closest-side, #f00, #ff0 10%, #f00 15%);

Circle Closest-side 2 values Specify a location

circle--: Center

Closest-side: outer side of the circle

---------Edge Box Chamfer

border-radius:0–99999px/0-100%/Em/rem; Four-sided chamfer (50% for circle)

border-top-left-radius:0–99999px/0-100%/Em/rem; Single Chamfer

Border-radius:--px–px–px–px; Four values: Left and right

---------Border Picture

Border-width:--px;

Border-image:url (' images/flow2.jpg ')----Round/stretch;

Background picture path Inward move height inward move width tile/extrude

Note: Border width adjusts the width of the picture

Principle: Picture 4 Corners load the picture by the size of the setting, and the picture is displayed evenly in the bounding box in the dimension moving inward.

---------Border Gradient

border:--px solid;

Border-image:-webkit-linear-gradient (position, color%, color,..) –px–px;

--PX: High Border width

---------transition Effects

Transition:property Duration Delay Timing-function

Object duration delay Bezier curve (motion mode)

Transition:width, height--s ease;

Multiple properties

Transition:all--s Ease;

All Properties

all/none– Select all changed properties/No over-selectable properties width height ...

--s– Excessive time

ease– Slow mode ease/slowly linear/constant ease-out/deceleration

ease-in-out/accelerate and slow down.

hover{Transition:all 5s;}:

Restore no transition effect

Delay

Start recovery has an over-effect

Properties of the action:

Vstart () Start value

Vres () Excessive value

Vend () End value

P Transition Function Output value

Vres= (1-p) *vstart+p*vend (integrity can be excessive)

Can over: Line-height,text-algin,opacity.shadow, Width,height, backgroun-colo,color, Position move

No excess: dispaly

---------animation effects

Animation definition

Animation:name duration delay timing-function iteration-count direction play-state Fill-mode

Name run time delay motion curve played back and forth mode play pause

Effect After Previous

Motion Description Linearity

@keyframes Name

{

from{:;}

to{:;}

}

Motion Description KeyFrames

@-webkit-keyframes Skyset {

0% {background:red;}

50%{Background:blue}

100% {background:yellow;}

}

Animation:--1--2–3–4–5–6–7--8;

--1: Animated Name

--2: Run time

--3: Run mode (same over) + steps () function Steps (--)

--4: Delay before start

--5: Number of plays n times Infinite Loop

--6: The animation is running in normal direction alternate in the direction of rotation

--7: Animation Pause paused pause animation running play animation

--8: Keyframe Control None does not change the default forwards the last property is left to finish

Backwards only the first display state both before and after the fill mode is used

@-webkit-keygrames Mymove {} compatible with Google

@-moz-keygrames Mymove {} compatible with Firefox

Animation loading

. select:hover {

Animation:name--s ease Infinite;

}

@keyfarmes name {

}

Instance

. box {

Animation:mymove 5s Infinite;

/*--Animation definition: Name time loop--*/

}

@keyframes Mymove {/*--animation effect--*/

from {left:0px;}

to {left:200px;}

}

---------Border Multi-color

-moz-border-bottom-colors:red blue Yellow;

One color 1px width from the outside, the remaining width shows the last color (only Firefox support)

---------Reflection

Box-reflect:none direction (reflection position) offset (reflection distance) Mask-box-image (reflection cover);

none--there is no

direction--above/below/left/right up or down

offset--Reflection Distance

Cases:

-webkit-box-reflect:below 10px-webkit-linear-gradient (Top, RGBA (255, 255, 255, 0.0) 10%, RGBA (255, 255, 255, 0.2), RG BA (255, 255, 255, 0.6));

CSS3 Advanced Style