Border
| Property | Description | CSS |
|---|---|---|
| border-image | A shorthand property for setting all the border-image-* properties | 3 |
| border-radius | A shorthand property for setting all the four border-*-radius properties | 3 |
| box-shadow | Attaches one or more drop-shadows to the box | 3 |
Background
| Property | Description | CSS |
|---|---|---|
| background-clip | Specifies the painting area of the background images | 3 |
| background-origin | Specifies the positioning area of the background images | 3 |
| background-size | Specifies the size of the background images | 3 |
文字效果
| Property | Description | CSS |
|---|---|---|
| hanging-punctuation | Specifies whether a punctuation character may be placed outside the line box | 3 |
| punctuation-trim | Specifies whether a punctuation character should be trimmed | 3 |
| text-align-last | Describes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify" | 3 |
| text-emphasis | Applies emphasis marks, and the foreground color of the emphasis marks, to the element's text | 3 |
| text-justify | Specifies the justification method used when text-align is "justify" | 3 |
| text-outline | Specifies a text outline | 3 |
| text-overflow | Specifies what should happen when text overflows the containing element | 3 |
| text-shadow | Adds shadow to text | 3 |
| text-wrap | Specifies line breaking rules for text | 3 |
| word-break | Specifies line breaking rules for non-CJK scripts | 3 |
| word-wrap | Allows long, unbreakable words to be broken and wrap to the next line | 3 |
字体
CSS3之前网页只能使用安装在本地的字体，在CSS3通过@font-face可以使用任何字体。
@font-face的属性有：
| Descriptor | Values | Description |
|---|---|---|
| font-family | name | Required. Defines a name for the font |
| src | URL | Required. Defines the URL of the font file |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded | Optional. Defines how the font should be stretched. Default is "normal" |
| font-style | normal italic oblique | Optional. Defines how the font should be styled. Default is "normal" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 | Optional. Defines the boldness of the font. Default is "normal" |
| unicode-range | unicode-range | Optional. Defines the range of UNICODE characters the font supports. Default is "U+0-10FFFF" |
2D Transforms
CSS3引入了新的Transforms属性，可以对图形进行变换。
| Property | Description | CSS |
|---|---|---|
| transform | Applies a 2D or 3D transformation to an element | 3 |
| transform-origin | Allows you to change the position on transformed elements | 3 |
该属性需要浏览器的前缀：
IE 9: -ms-
Safari/Chrome: -webkit-
Opera: -o-
Firefox: -moz-
Safari/Chrome: -webkit-
Opera: -o-
Firefox: -moz-
例：
div
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari and Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
}
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari and Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
}
支持的函数有：
| 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 |
3D Transforms
| Property | Description | CSS |
|---|---|---|
| transform | Applies a 2D or 3D transformation to an element | 3 |
| transform-origin | Allows you to change the position on transformed elements | 3 |
| transform-style | Specifies how nested elements are rendered in 3D space | 3 |
| perspective | Specifies the perspective on how 3D elements are viewed | 3 |
| perspective-origin | Specifies the bottom position of 3D elements | 3 |
| backface-visibility | Defines whether or not an element should be visible when not facing the screen | 3 |
| 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 |
Transitions
CSS3可以不使用Flash动画或JavaScripts就可以动态改变样式。
例如：
div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari and Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}
div:hover
{
width:200px;
}
{
width:200px;
}
| Property | Description | CSS |
|---|---|---|
| transition | A shorthand property for setting the four transition properties into a single property | 3 |
| transition-property | Specifies the name of the CSS property to which the transition is applied | 3 |
| transition-duration | Defines the length of time that a transition takes. Default 0 | 3 |
| transition-timing-function | Describes how the speed during a transition will be calculated. Default "ease" | 3 |
| transition-delay | Defines when the transition will start. Default 0 | 3 |
Animations
CSS3可以定义动画，例如：
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
| Property | Description | CSS |
|---|---|---|
| @keyframes | Specifies the animation | 3 |
| animation | A shorthand property for all the the animation properties, except the animation-play-state property | 3 |
| animation-name | Specifies the name of the @keyframes animation | 3 |
| animation-duration | Specifies how many seconds or milliseconds an animation takes to complete one cycle. Default 0 | 3 |
| animation-timing-function | Describes how the animation will progress over one cycle of its duration. Default "ease" | 3 |
| animation-delay | Specifies when the animation will start. Default 0 | 3 |
| animation-iteration-count | Specifies the number of times an animation is played. Default 1 | 3 |
| animation-direction | Specifies whether or not the animation should play in reverse on alternate cycles. Default "normal" | 3 |
| animation-play-state | Specifies whether the animation is running or paused. Default "running" | 3 |
Multiple Columns
CSS３可以把一个元素分成多列显示，例如：
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
-moz-column-rule:4px outset #ff00ff; /* Firefox */
-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
column-rule:4px outset #ff00ff;
}
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
-moz-column-rule:4px outset #ff00ff; /* Firefox */
-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
column-rule:4px outset #ff00ff;
}
| Property | Description | CSS |
|---|---|---|
| column-count | Specifies the number of columns an element should be divided into | 3 |
| column-fill | Specifies how to fill columns | 3 |
| column-gap | Specifies the gap between the columns | 3 |
| column-rule | A shorthand property for setting all the column-rule-* properties | 3 |
| column-rule-color | Specifies the color of the rule between columns | 3 |
| column-rule-style | Specifies the style of the rule between columns | 3 |
| column-rule-width | Specifies the width of the rule between columns | 3 |
| column-span | Specifies how many columns an element should span across | 3 |
| column-width | Specifies the width of the columns | 3 |
| columns | A shorthand property for setting column-width and column-count | 3 |
User Interface
CSS3支持新的UI属性，比如:
- resize
- box-sizing
- outline-offset
| Property | Description | CSS |
|---|---|---|
| appearance | Allows you to make an element look like a standard user interface element | 3 |
| box-sizing | Allows you to define certain elements to fit an area in a certain way | 3 |
| icon | Provides the author the ability to style an element with an iconic equivalent | 3 |
| nav-down | Specifies where to navigate when using the arrow-down navigation key | 3 |
| nav-index | Specifies the tabbing order for an element | 3 |
| nav-left | Specifies where to navigate when using the arrow-left navigation key | 3 |
| nav-right | Specifies where to navigate when using the arrow-right navigation key | 3 |
| nav-up | Specifies where to navigate when using the arrow-up navigation key | 3 |
| outline-offset | Offsets an outline, and draws it beyond the border edge | 3 |
| resize | Specifies whether or not an element is resizable by the user | 3 |
CSS引用：