标签：
CSS3 is the latest evolution of the Cascading Style Sheets language and aims at extending CSS2.1. It brings a lot of long-awaited novelties(备受期待的新特性), like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts.(圆角，阴影，渐变，渐变，过渡，动画和新的布局多栏，弹性盒子，网格布局)
Experimental parts are vendor-prefixed and should either be avoided in production environments, or used with extreme caution as both their syntax and semantics can change in the future.
CSS3 has been split into "modules".(这些模块彼此独立， 按照各自的进度来进行标准化) It contains the "old CSS specification" (which has been split into smaller pieces). In addition, new modules are added.
Some of the most important CSS3 modules are:
Most of the new CSS3 properties are implemented in modern browsers.
IE9+
<‘border-image-source‘> || <‘border-image-slice‘> [ / <‘border-image-width‘> | / <‘border-image-width‘>? / <‘border-image-outset‘> ]? || <‘border-image-repeat‘>
background-image 给同一个元素增加多个背景图片
CSS3 allows you to add multiple background images for an element
background-size The CSS3 background-size property allows you to specify the size of background images.
Before CSS3, the size of a background image was the actual size of the image. CSS3 allows us to re-use background images in different contexts.
The size can be specified in 1: lengths, 2: percentages, or by using one of the 3: two keywords: contain or cover.
The CSS3 background-origin property specifies where the background image is positioned.
The property takes three different values:
The CSS3 background-clip property specifies the painting area of the background.
The property takes three different values:
CSS supports color names, hexadecimal and RGB colors.
In addition, CSS3 also introduces:
CSS3 gradients let you display smooth transitions between two or more specified colors.
Earlier, you had to use images for these effects. However, by using CSS3 gradients you can reduce download time and bandwidth usage. In addition, elements with gradients look better when zoomed, because the gradient is generated by the browser.
With CSS3 you can add shadow to text and to elements.
In this chapter you will learn about the following properties:
text-shadowbox-shadowThe CSS3 text-shadow property applies shadow to text.
In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow (2px):
The CSS3 box-shadow property applies shadow to elements.
CSS3 contains several new text features.
In this chapter you will learn about the following text properties:
text-overflowword-wrapword-breakThe CSS3 text-overflow property specifies how overflowed content that is not displayed should be signaled to the user.
text-overflow: clip ellipsis "string"
允许长单词换行到下一行. 允许长单词被拦腰打断转换到另一行
word-breakThe word-break CSS property is used to specify whether to break lines within words.
word-break: normal;
word-break: break-all;
word-break: keep-all;CSS3 Web Fonts(在线字体) - The @font-face Rule
Web fonts allow Web designers to use fonts that are not installed(没有安装在用户计算机上的) on the user‘s computer.
When you have found/bought the font you wish to use, just include the font file on your web server, and it will be automatically downloaded to the user when needed.
Different Font Formats
TTF OTF WOFF WOFF2.O SVG Fonts/Shape EOT
SVG Fonts/Shape:SVG fonts allow SVG to be used as glyphs when displaying text.
例子：
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
CSS3 transforms allow you to translate, rotate, scale, and skew(移动，旋转，缩放，拉伸) elements.
A transformation is an effect that lets an element change shape, size and position(形状，大小，位置).
CSS3 supports 2D and 3D transformations.
translate()rotate()scale()skewX()skewY()matrix()2D Transform Methods
| Function | Description |
|---|---|
| matrix(n,n,n,n,n,n) | Defines a 2D transformation, using a matrix of six values |
| translate(x,y) | Defines a 2D translation, moving the element along the X- and the Y-axis |
| translateX(n) | Defines a 2D translation, moving the element along the X-axis |
| translateY(n) | Defines a 2D translation, moving the element along the Y-axis |
| scale(x,y) | Defines a 2D scale transformation, changing the elements width and height |
| scaleX(n) | Defines a 2D scale transformation, changing the element‘s width |
| scaleY(n) | Defines a 2D scale transformation, changing the element‘s height |
| rotate(angle) | Defines a 2D rotation, the angle is specified in the parameter |
| skew(x-angle,y-angle) | Defines a 2D skew transformation along the X- and the Y-axis |
| skewX(angle) | Defines a 2D skew transformation along the X-axis |
| skewY(angle) | Defines a 2D skew transformation along the Y-axis |
The translate() method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis).
The rotate() method rotates an element clockwise or counter-clockwise(逆时针) according to a given degree.
The scale() method increases or decreases the size of an element (according to the parameters given for the width and height).
The skewX() method skews an element along the X-axis by the given angle.
The skewY() method skews an element along the Y-axis by the given angle.
The skew() method skews an element along the X and Y-axis by the given angles.
matrix()The matrix() method combines all the 2D transform methods into one.
The matrix() method take six parameters, containing mathematic functions, which allows you to rotate, scale, move (translate), and skew elements.
The parameters are as follow: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()):
Allows you to change the position(位置) on transformed elements
CSS3 allows you to format your elements using 3D transformations.
CSS3 Transform Properties
The following table lists all the 3D transform properties:
| Property | Description |
|---|---|
| transform | Applies a 2D or 3D transformation to an element |
| transform-origin | Allows you to change the position on transformed elements |
| transform-style | Specifies how nested elements are rendered in 3D space |
| perspective | Specifies the perspective on how 3D elements are viewed |
| perspective-origin | Specifies the bottom position of 3D elements |
| backface-visibility | Defines whether or not an element should be visible when not facing the screen |
| Function | Description |
|---|---|
| matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) |
Defines a 3D transformation, using a 4x4 matrix of 16 values |
| translate3d(x,y,z) | Defines a 3D translation |
| translateX(x) | Defines a 3D translation, using only the value for the X-axis |
| translateY(y) | Defines a 3D translation, using only the value for the Y-axis |
| translateZ(z) | Defines a 3D translation, using only the value for the Z-axis |
| scale3d(x,y,z) | Defines a 3D scale transformation |
| scaleX(x) | Defines a 3D scale transformation by giving a value for the X-axis |
| scaleY(y) | Defines a 3D scale transformation by giving a value for the Y-axis |
| scaleZ(z) | Defines a 3D scale transformation by giving a value for the Z-axis |
| rotate3d(x,y,z,angle) | Defines a 3D rotation |
| rotateX(angle) | Defines a 3D rotation along the X-axis |
| rotateY(angle) | Defines a 3D rotation along the Y-axis |
| rotateZ(angle) | Defines a 3D rotation along the Z-axis |
| perspective(n) | Defines a perspective view for a 3D transformed element |
CSS3 transitions allows you to change property values smoothly (from one value to another), over a given duration.
| transition | A shorthand property for setting the four transition properties into a single property |
| transition-delay | Specifies a delay (in seconds) for the transition effect |
| transition-duration | Specifies how many seconds or milliseconds a transition effect takes to complete |
| transition-property | Specifies the name of the CSS property the transition effect is for |
| transition-timing-function | Specifies the speed curve of the transition effect |
CSS3 animations allows animation of most HTML elements without using JavaScript or Flash!
What are CSS3 Animations?
An animation lets an element gradually change from one style to another.
You can change as many CSS properties you want, as many times you want.
To use CSS3 animation, you must first specify some keyframes for the animation.
Keyframes hold what styles the element will have at certain times.
The following table lists the @keyframes rule and all the animation properties:
| Property | Description |
|---|---|
| @keyframes | Specifies the animation code |
| animation | A shorthand property for setting all the animation properties |
| animation-delay | Specifies a delay(延迟) for the start of an animation |
| animation-direction | Specifies whether an animation should play in reverse direction or alternate cycles |
| animation-duration | Specifies how many seconds or milliseconds an animation takes to complete one cycle |
| animation-fill-mode | Specifies a style for the element when the animation is not playing (when it is finished, or when it has a delay) |
| animation-iteration-count | Specifies the number of times an animation should be played |
| animation-name | Specifies the name of the @keyframes animation |
| animation-play-state | Specifies whether the animation is running or paused |
| animation-timing-function | Specifies the speed curve of the animation |
Use the border-radius property to create rounded images:
Use the border property to create thumbnail images.
Responsive images will automatically adjust(自动调整) to fit the size of the screen.
To center an image within the page, use margin: auto; and make it into a block element:
img {
display: block;
margin: auto;
width: 50%;
}
The CSS filter property adds visual effects (like blur and saturation) to an element.
Note: The filter property is not supported in Internet Explorer(IE不支持), Edge 12, or Safari 5.1 and earlier.
The CSS3 multi-column layout allows easy definition of multiple columns of text - just like in newspapers(像报纸文字那样的多栏布局):
In this chapter you will learn about the following multi-column properties:
column-countcolumn-gapcolumn-rule-stylecolumn-rule-widthcolumn-rule-colorcolumn-rulecolumn-spancolumn-widthThe column-count property specifies the number of columns an element(元素被分为多少列) should be divided into.
column-gap 分栏之间的间距
column-rule column-rule-width column-rule-style column-rule-color
分栏之间的宽度 样式 颜色
元素“横跨”多少栏
栏目宽度
whether or not an element should be resizable by the user.
adds space between an outline and the edge or border of an element.(外边框和边距之间的距离)
content-box（default），border-box，padding-box
区别在于计算宽度高度时的差别
new layout mode in CSS3
标签：
原文地址：http://www.cnblogs.com/oneplace/p/5616706.html
