CSS3 新特性

1. border-radius

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

Safari 5和IE 9都支持border-radius格式

所有属性：

• border-radius
• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

2. border-image

#borderimg {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
    border-image: url(border.png) 30 round;
}

3. Backgrounds

3.1 指定背景尺寸

body {
    background: url(path/to/image.jpg) no-repeat;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
}

3.2 多个背景图片

.box {
    background: url(image/path.jpg) 0 0 no-repeat,
    url(image2/path.jpg) 100% 0 no-repeat;
}

4. Gradients 渐变

4.1 两种渐变模式

• Linear Gradients (goes down/up/left/right/diagonally)
• Radial Gradients (defined by their center)

IE 10才开始支持

background: linear-gradient(direction, color-stop1, color-stop2, ...);

5. Shadows

5.1 两种 Shadow

• text-shadow
• box-shadow

5.2 text-shadow

h1 {
    text-shadow: 2px 2px 5px red;
}

5.3 box-shadow

div.card {
    width: 250px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
}

box-shadow接受四个参数：

• x-offset x 偏移
• y-offset y 偏移
• blur 模糊度
• color of shadow 阴影的颜色

6. Text

6.1 几个新的 text 属性

• text-overflow
• word-wrap
• word-break

6.2 text-overflow

6.2.1 text-overflow: clip

6.2.2 text-overflow: ellipsis

6.3 word-wrap

6.3.1 word-wrap: break-word

6.3.2 word-break: keep-all

6.3.3 word-break: break-all

7. Web Fonts

7.1 不同的 Font 格式

• TrueType Fonts (TTF)
• OpenType Fonts (OTF)
• The Web Open Font Format (WOFF)
• The Web Open Font Format (WOFF 2.0)
• SVG Fonts/Shapes
• Embedded OpenType Fonts (EOT)

7.2 语法

@font-face {
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}

div {
    font-family: myFirstFont;
}

8. 2D Transforms

• translate()
• rotate()
• scale()
• skewX()
• skewY()
• matrix()

8.1 Translate

div {
    -ms-transform: translate(50px, 100px); /* IE 9 */
    -webkit-transform: translate(50px, 100px); /* Safari */
    transform: translate(50px, 100px);
}

8.2 Rotate

div {
    -ms-transform: rotate(20deg); /* IE 9 */
    -webkit-transform: rotate(20deg); /* Safari */
    transform: rotate(20deg);
}

8.3 Scale

div {
    -ms-transform: scale(2, 3); /* IE 9 */
    -webkit-transform: scale(2, 3); /* Safari */
    transform: scale(2, 3);
}

8.4 skewX

div {
    -ms-transform: skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari */
    transform: skewX(20deg);
}

8.5 skewY

div {
    -ms-transform: skewY(20deg); /* IE 9 */
    -webkit-transform: skewY(20deg); /* Safari */
    transform: skewY(20deg);
}

8.6 skew

div {
    -ms-transform: skew(20deg, 10deg); /* IE 9 */
    -webkit-transform: skew(20deg, 10deg); /* Safari */
    transform: skew(20deg, 10deg);
}

8.7 matrix

div {
    -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
    -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
    transform: matrix(1, -0.3, 0, 1, 0, 0);
}

语法：

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

9. 3D Transforms

9.1 兼容性

IE 10

9.2 rotateX

div {
    -webkit-transform: rotateX(150deg); /* Safari */
    transform: rotateX(150deg);
}

9.3 rotateY

div {
    -webkit-transform: rotateY(130deg); /* Safari */
    transform: rotateY(130deg);
}

9.4 rotateZ

div {
    -webkit-transform: rotateZ(90deg); /* Safari */
    transform: rotateZ(90deg);
}

10. Transitions

div {
    -webkit-transition: width 2s, height 4s; /* Safari */
    transition: width 2s, height 4s;
}

11. Animations

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
    animation-direction: alternate;
}

参考

CSS3 Introduction