CSS3基础

主要学习下CSS3的新的属性

边框border

1. 基础属性设置 border：2px solid
2. 边框圆角 border-radius ： 20px
3. 边框图片 border-image ： url(xxx.png) round

背景backgroud

1. 背景图片大小 backgroud-size： 20px 20px
2. 背景图片填充区域 backgroud-origin：content-box/border-box

渐变Gradients

1. 径向改变 liner-gradient(to right, red, blue)
2. 中心扩散 radial-gradiient(red, blue, green)

字体 font

1. 自定义字体 @font-face

2d转换 transform

1. translate 平移 translate(20px, 20px)
2. rotate 旋转 rotate(30deg)
3. scale 拉伸 scale(2, 4)
4. skew 收缩 skew(2, 3)
5. matrix 矩阵变换

过渡 transition

1. transition(width 2s, height 2s, transform 2s)

动画 animation

1. animation : name 5s; name {0% {background : white}
   0% {background : white} 50% {background : red} 100% {background : black}}