css3能做什么
响应式开发的基础，然后能实现一些酷炫的效果咯。
以下案例纯css3实现，一点都没用js （入门简单，但是水很深）
叮当猫纯用css3做出
http://codepen.io/airen/pen/icFba
如果大家感兴趣，大家可以去慕课网上找大漠老师的课学习。
边框
1.圆角效果 border-radius：border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ border-radius: 100%;就是一个圆了。
border-radios:100px/10px (水平100，垂直10)
2.阴影 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];（阴影模糊半径：只能是正值；阴影扩展半径：可以是正负值）（自带边框）
外阴影x和y（正值）出现在右下；内阴影x和y（正值）出现在左上;
3.为边框应用图片 border-image:
颜色相关
1.颜色之RGBA
语法：color：rgba(R,G,B,A) (A为透明度参数，取值在0~1之间，不可为负值)
2.渐变色彩
文字与字体
1.text-overflow (clip:剪切；ellipsis：省略标记）
省略号效果：text-overflow:ellipsis; overflow:hidden;white-space:nowrap
2.嵌入字体@font-face
3.文本阴影text-shadow
text-shadow: X-Offset Y-Offset blur color; x正向右，y正向下;Blur：是指阴影的模糊程度 (text-shadow: 2px 2px 0 red;)
与背景相关的样式
1.background-origin ： border-box | padding-box | content-box;背景图片分别是从边框，内边距（默认值），内容区域开始显示。背景需要设置no-repeat属性。
2.background-clip:默认值为border-box,其他同上
3.background-size:
background-size: auto | <长度值> | <百分比> | cover | contain
①.长度或百分比就设一个值时，图片等比缩放。
②.cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；
③.contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。
4.multiple backgrounds
background:url(http://eg.png) no-repeat left top/200px 55%
CSS3选择器
1.属性选择器：
2.结构性伪类选择器:root (根元素为html)、:not 、:empty、:target、:first-child 、:last-child 、:nth-child(n) (括号里可以是2n+1、-n+5、even、odd等)、:nth-last-child(n) (同上)
x:first-of-type 、x:nth-of-type(n) (括号里同上)、x:last-of-type、x:nth-last-of-type(n)、only-child （子元素只有唯一）、only-of-type (子元素类型唯一)
:enabled、:disabled
:checked（选择框加点变化示例）、::selection(改变用鼠标选择网页文本的样式)
:read-only(与html中readonly='readonly'配合使用)、:read-write (与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。)
::before && ::after(作出如下效果图)
拓展：CSS3实现曲边阴影&&翘边阴影
曲边阴影 翘边阴影
曲边阴影方法：把直角阴影写在盒子上，在盒子内部插入两个曲线阴影，通过定位让曲线阴影和直角阴影重合，改变z-index，boarder-radios来达到效果。
翘边阴影方法：直角阴影加上两个阴影
以下为实现代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS实现曲线阴影和翘边阴影</title> 5 <meta charset="utf-8"> 6 <link rel="stylesheet" type="text/css" href="css/style.css"> 7 </head> 8 <body> 9 <div class="wrap effect"> 10 <h1>Shadow Effect</h1> 11 </div> 12 <ul class="box"> 13 <li><img src="images/photo1.jpg"></li> 14 <li><img src="images/photo2.jpg"></li> 15 <li><img src="images/photo3.jpg"></li> 16 </ul> 17 </body> 18 </html>