从零单排之CSS3

CSS3 概览

CSS3大法好

今夜秋风阵阵，雾霾层层。不禁让人想作诗，不过考虑到自己才华实在有限的有点有限，就不丢人了，只做一首就好了。

CSS3大法真是好， 前端群众学到老。
圆角阴影好旋转， 移动扭曲加缩放。
颜色渐变和背景， 伪类动画跑不了。
布局选择多媒体， 字体响应就是屌。

CSS3说起来条目繁多，乍看之下与之前CSS2比起来复杂了好多。其实多出的部分主要归结为两点：
1.是各浏览器厂商的前缀（-webkit, -moz, -o）
2.则是CSS3新增的动画，由于是新增的，所以看着陌生。
第一点和第二点结合起来就会导致css的代码看起来老长老长。
所以如果你弄清这一点的话，应该对于CSS3就不会显得那么头大了。

CSS3 简介

简介就是简单介绍，那么下面让我以《CSS3大法好》来和大家简单介绍一下CSS3， 希望能帮助大家更好的去学习CSS3。
圆角指的即使border-radius, 一般正式的写法为：

div {
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
         -o-border-radius: 3px;
            border-radius: 3px;
}

效果请看sf任意一个按钮即可
写到此处不禁跟大家说，CSS3最好还是配合CSS预编译来写。可选的有LESS，SASS，Stylus(这个没接触过) 额外插一句最近看SASS，发现SASS优于LESS最明显一点是SASS有compass，而LESS毛都木有。跑题了...
言归正传，其实CSS3不仅带来了圆角，同时也带来了border-image,看属性名大家应该知道是什么意思了。
阴影其实可以分为两部分看text-shadow和box-shadow，不过虽然两个都是dow，但是待遇仍是不那么一样，首先不同一点就是两个属性的值不同：

div {
    box-shadow: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]
    (内阴影) x轴偏移， y轴偏移，(模糊)， 颜色
    text-shadow: none | [<shadow>,]* <shadow>where <shadow> is: [ <color>? <offset-x> <offset-y> <blur-radius>? | <offset-x> <offset-y> <blur-radius>? <color>? ]
    颜色，x轴偏移，y轴偏移，(模糊) 或者 x轴偏移，y轴偏移，(模糊)，颜色
    //举个例子
    box-shadow: 4px 4px 5px #f00;
    text-shadow: #f00 4px 4px 5px;
}

然后text-shadow是IE10， box-shadow是IE9。
随便写写居然这么多了， 其他的放在第二期吧。
(PS: 大家觉得我有必要写一些demo吗，直接放在github上面给大家参考？)