CSS3新特性(1)

CSS 用于控制网页的样式和布局。

CSS3 是最新的 CSS 标准。

1、新边框属性

• border-radius 圆角
• box-shadow   盒阴影
• border-image 边框图片

2、CSS3圆角属性

• border-radius
• border-top-left-radius            左上角
• border-top-right-radius          右上角
• border-bottom-right-radius    左下角
• border-bottom-left-radius      右下角

3、CSS3背景

• background-image
• background-size
• background-origin
• background-clip

4、CSS3渐变

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
• 语法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
• 径向渐变（Radial Gradients）- 由它们的中心定义
• 语法：background-image: radial-gradient(shape size at position, start-color, ..., last-color);

5、CSS3文本效果

• text-shadow
• box-shadow
• text-overflow
• word-wrap
• word-break

6、CSS3自定义字体

@font-face规则

<style> 
@font-face{
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}
 
div{
    font-family:myFirstFont;
}
</style>

7、CSS3转换

以对元素进行移动、缩放、转动、拉长或拉伸。

• translate()       位移
• rotate()            旋转
• scale()             缩放
• skew()             倾斜
• matrix()           合并方法

div{
    transform: rotate(30deg);
}

8、CSS3过渡

元素从一种样式逐渐改变为另一种的效果。

div{
    transition: width 1s linear 2s;
}

transition-property

transition-duration

transition-timing-funciton

transition-delay