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