CSS Learning Note Four

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.