CSS3 Overview Update Time 2014-0412-1317

CSS3 Overview

CSS3 can be divided into: Text, border model, background, animation, etc.

Start to support.

 

CSS3 text module

Text-shadow: Horizontal offset vertical offset [blur radius] [color]
Multiple texts can be separated by commas.
Start to support.

Text-overflow: Clip | ellipsis
This attribute must be used with overflow: hidden,
Ellipsis indicates that when the text overflows, The ellipsis is displayed in the overflow area and can only be used for a row of text in the horizontal direction.
Support (previously private attribute of IE ).

Word-wrap: Normal | bread-word
This attribute allows a long broken word to be displayed.
A similar property, white-space, is used to display a piece of text in a row, while word-wrap is used for a word rather than a piece of text.
Support (previously private attribute of IE ).

In CSS3, you can use@ Font-faceTo embed the network font, see the http://www.w3cplus.com/content/css3-font-face

 

 

CSS3 border box Module

Border-radius: [Length or percentage] {1, 4} [/length or percentage {1, 4}]
The length or percentage is described clockwise from the upper left corner;
The length describes the distance from the center of the circle to the corner of each border. It first describes the distance from the center to the left and right sides, and the distance from the center to the upper and lower sides after the slash;
The percentage is relative to the width of the box, that is, the width of 50% is about 1/4 circle, and can constitute a half circle;
This attribute can be split into attributes such as border-top-left-radius and border-top-right-radius.
Start to support.

Border-image: Image link cropping ratio {} [/Border Width {}]? [Stretch | repeat | round] {0, 2}
This attribute can be split into border-image-source, border-image-slice, border-image-width, border-image-repeat
The border-image-slice attribute divides an image into nine grids and can specify four values like margin. This attribute can use percentages and pixels, but cropping by pixels does not require px units;
When using the border-image-slice attribute, the percentage is calculated relative to the image size.
The value of the border-image-repeat attribute round compresses or extends the background image of the border-image to adapt to the width of the border-width.
For example, border-image: url(border.png) 50/10 px;
In additionBorder-image-outsetAttribute to set the outbound distance of the border background image,
Border-image is actually drawn from the outside using the current border-width. If the border-width value is insufficient, it overlaps with the content in it.
If border-width is not defined, border-image uses border-width of 3px.
Start to support.

Box-shadow: X axis displacement Y axis displacement blur radius shadow color [shadow type inset];
You can combine multiple box shadows and use commas to describe them.
Start to support.

Box-reflect: (Aboabve | below | left | right) Distance from the box mask effect
For example, div {-webkit-box-reflect: below 1px-webkit-gradient (linear, 0% 100%, 100% 100%, from (rgba (255,255,255, 0 )), to (white ));}
If overflow: hidden is set in the box, the reflection is invisible to the outside.
This attribute is currently not supported (20140412 ).

Box-sizing: Content-size | border-box
When the value of box-sizing is border-box, the width value of the element includes padding and border.
IE8-Moz-header may be specified in Firefox.

MaskProperties are similar to those of background, which can be divided into attributes.
Mask-attachment: fixed | scroll
Mask-clip: border-box | padding-box | content-box
Mask-origin: border-box | padding-box | content-box
Mask-image is the same as background-image
Mask-repeat: repeat | repeat-x | repeat-y | no-repeat
Mask-composite and background-composite
Mask-box-image is the same as border-image
For example, text gradient:

Hello WorldText gradient in WebKit

 

 

 

CSS3 background module

Background-origin: Border-box | padding-box | content-box
CSS2.1 is equivalent to background-origin: padding-box;
Start to support.

Background-clip: Border-box | padding-box | content-box
CSS2.1 is equivalent to background-clip: padding-box;
IE9Start to support.
The preceding two attributes are usually used together. For example, if you expect that the background-color is not displayed in the padding area, you should set it to the content-box value.

Background-size: Pixel or percentage
The display range of the background image depends on the background-origin attribute.
IE9Start to support.

 

CSS3 Animation

TransformAttributes can rotate, scale, and deform elements.
Transform:Rotate(45deg); it can be rotated clockwise.
Transform:Scale(1, 0.5); Scale and flip horizontally.
Transform:Translate(100,100); can be moved.
Transform:Skew(30deg, 10deg); you can perform oblique cutting. The first parameter is the clockwise oblique cutting of the X axis, and the second parameter is the clockwise oblique cutting of the Y axis.
IE9Start to support.

HELLOA simple animation effect that rotates the circle as the mouse passes

Translate3d,Translate3dX,Translate3dY,Scale3d,ScaleZ,Rotate3d3D transformation can be achieved.

 

TransitionThe attribute allows the CSS attribute value to smoothly transition within a certain period of time.
This effect can be triggered by mouse clicking, getting focus, being clicked, or any changes to the element.
Start to support.

Transition: Attribute duration conversion effect delay time
Transition-property: All | none | specified attribute
Transition-duration: Duration, for example, 0.2 s
Transition-timing-function: Linear | extract-in | extract-out | extract-in-out | cubic-bezeiser
Transition-delay: Latency before animation execution

Hello WorldCSS3 implementation of a gradient background color with one mouse

 

AnimationYou can set the effect of multiple frames. animation will combine, transform, and display these frames according to the animation effect.
The animation uses @ keyframes to define the animation identifier and the action of each frame.
IE10Start to support.

Animation-name: Specifies the identifier of the animation.
Animation-duration: Duration
Animation-delay: Latency before animation execution
Animation-timing-function: Animation display effect, same as transition-timing-function
Animation-iteration-count: Number of animation cycles. The default value is 1. infinite loops can be used.
Animation-direction: Normal | alternate

Hello WorldMove the mouse over CSS 3 with a blinking background color