从零单排之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上面给你们参考？)