Day1：CSS3学习
、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。
CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器chrome
在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，虽然目前较新版本的浏览器都是不需要前缀的，但为了更好的向前兼容前缀还是少不了的。
| 前缀 |
浏览器 |
| -webkit |
chrome和safari |
| -moz |
firefox |
| -ms |
IE |
| -o |
opera |
CSS3的新特性
选择器 以前我们通常用class、 ID 或 tagname 来选择HTML元素，CSS3的选择器强大的难以置信。它们可以减少在标签中的class和ID的数量更方便的维护样式表、更好的实现结构与表现的分离。
圆角效果 以前做圆角通常使用背景图片，或繁琐的元素拼凑，现在很简单了 border-radius 帮你轻松搞定。
块阴影与文字阴影 可以对任意DIV和文字增加投影效果。
色彩 CSS3支持更多的颜色和更广泛的颜色定义。新颜色CSS3支持HSL ， CMYK ，HSLA and RGBA。
渐变效果 以前只能用Photoshop做出的图片渐变效果，现在可以用CCS写出来了。IE中的滤镜也可以实现。
个性化字体 网页上的字体太单一？使用@Font-Face 轻松实现定制字体。
多背景图 一个元素上添加多层背景图片。
边框背景图 边框应用背景图片。
变形处理 你可以对HTML元素进行旋转、缩放、倾斜、移动、甚至以前只能用JavaScript实现的强大动画。
多栏布局 可以让你不用使用多个div标签就能实现多栏布局。浏览器解释这个属性并生成多栏，让文本实现一个仿报纸的多栏结构。
媒体查询 针对不同屏幕分辨率，应用不同的样式。
（慕课网《十天精通CSS3》学习笔记）
CSS3 模块
CSS3 被划分为模块。其中最重要的 CSS3 模块包括：
- 选择器
- 框模型
- 背景和边框
- 文本效果
- 2D/3D 转换
- 动画
- 多列布局
- 用户界面
- CSS3 边框
- border-radius 圆角边框
border-radius:10px; /* 所有角都使用半径为10px的圆角 */
border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */
- box-shadow 边框阴影
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
1、阴影模糊半径与阴影扩展半径的区别
阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；
2、X轴偏移量和Y轴偏移量值可以设置为负数
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
- border-image 边框图片
background:url(xx.jpg) 10px 20px no-repeat;
顾名思义就是为边框应用背景图片，它和我们常用的background属性比较相似。例如：background:url(xx.jpg) 10px 20px no-repeat;
但是又比背景图片复杂一些。
想象一下：一个矩形，有四个边框。如果应用了边框图片，图片该怎么分布呢？ 图片会自动被切割分成四等分。用于四个边框。 可以理解为
它是一个切片工具，会自动把用做边框的图片切割。怎么切割呢？为了方便理解，做了一张特殊的图片，由9个矩形（70*70像素）拼成的一张
图（210*210像素），并标注好序号，是不是像传说中的九宫图，如下：
我们把上图当作边框图片 来应用一下， 看一看是什么效果
根据border-image的语法：
#border-image{ background:#F4FFFA; width:210px; height:210px; border:70px solid #ddd;
border-image:url(borderimg.png) 70 repeat }
效果：
从序号可以看出div的四个角分别对应了背景图片的四个角。而2,4,6,8 被重复。5在哪？因为是从四周向中心切割图片
的所以，5显示不出来。而在chrome浏览器中5是存在的，下图的样子：
repeat的意思就是重复，目前因为是刚好被整除，效果看不出来。如果改下DIV的宽高，再来看重复的效果：
边角部分为裁掉了，可见repeat就是一直重复，然后超出部分剪裁掉，而且是居中开始重复。
Round 参数：Round可以理解为圆满的铺满。为了实现圆满所以会压缩（或拉伸）；
#border-image { width:170px; height:170px; border:70px solid;
border-image:url(borderimg.png) 70 round; }
效果：
可见图片被压扁了。
Stretch 很好理解就是拉伸，有多长拉多长。有多远“滚”多远。
border-image:url(borderimg.png) 70 stretch
看一下效果：
2,4,6,8分别被拉伸显示。
注意：Chrome下，中间部分也会被拉伸，webkit浏览器对于round属性和repeat属性似乎没有区分，显示效果是一样的。
Firefox 26.0 下是可以准确区分的。