CSS Learning Note Four

CSS weights:

CSS3 New properties:

Text Shadow

p{

text-shadow:5px 5px 5px #333; Horizontal displacement, vertical displacement, blur radius, color

}

Text indent

p{

text-indent:10px; Can be inherited

}

Text overflow processing

p{

Word-wrap:break-word; Word break, default

Word-break:break-all; Break character

White-space:nowrap: Force display of all text in one line

Text-overflow:clip; Cut off part (need to cooperate with Overflow:hidden; use)

Text-overflow:ellipsis; The ellipsis is displayed in excess of the part (required with Overflow:hidden; use)

Overflow:hidden;

}

Rounded Corners

#d1 {

border-radius:10px;

border-radius:100%; Round

}

Box Shadow

#d1 {

box-shadow:10px 10px 10px #333;

}

Background picture full

Background-size:cover; Equal scale Scaling

Rotating

#d1: hover{

Transform:rotate (40DEG) scale (1.2); Rotate 40 degrees clockwise, 1.2 times times larger

Transform:translate (40px,40px); Horizontal offset 40px, vertical offset 40px

Transform:skew (30DEG,-10DEG); Tilt 30 degrees horizontally, tilt 10 degrees vertically

}

Smooth transitions

#d1 {

Transition:all 2s ease-in;

}

Animation

#d1 {

width:500px;

heigt:330px;

Background-image:url ("");

Position:absolute;

left:50%;

margin-left:-250px;

top:50%;

margin-top:-115px;

-webkit-animation:x-span 20s infinite linear; Animation name, run cycle, number of times, the way (if the display does not show that the browser version does not support standard notation need to add-webkit-)

}

@-webkit-kegframes x-span{definition Animation (show no effect also need to add-webkit)

0%{

Transform:rotatex (0DEG); Rotate along the x axis

}

50%{

Transform:rotatex (180DEG); Rotate 180 degrees along the x axis

}

100%{

Transform:rotatex (360DEG); Rotate 360 degrees along the x axis

}

}

Gradient

#d1 {

Background:-webkit-gradient (linear,left top,left bottom,from (blue), to (red), color-sopt (0.4, #fff), Color-stop (0.6,# FFF));

Linear gradient: Start position, end position, start color, end color, color label (color label position, color)

Background:-webkit-gradient (radial,center center,0,center center,460,from (blue), to (red), Color-stop (0.6, #fff));

Radial gradient: Inner circle center position, Inner circle radius, Outer circle radius, Outer circle radius, start color, end color, color label

}

CSS Learning Note Four