CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，虽然目前较新版本的浏览器都是不需要前缀的，但为了更好的向前兼容前缀还是少不了的。
|
前缀 |
浏览器 |
|
-webkit |
chrome和safari |
|
-moz |
firefox |
|
-ms |
IE |
|
-o |
opera |
CSS3给我们带来了什么好处呢？简单的说，CSS3把很多以前需要使用图片和脚本来实现的效果、甚至动画效果，只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影，过渡、动画等。
一、圆角（border-radius）是向元素添加圆角边框。
border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */
二、阴影 （box-shadow）
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
注意：inset 可以写在参数的第一个或最后一个，其它位置是无效的。
.box_shadow
{
box-shadow:4px 2px 6px #333333 inset;
}
添加多个阴影：
以上的语法的介绍，就这么简单，如果添加多个阴影，只需用逗号隔开即可。如：
.box_shadow{ box-shadow:3px 2px 5px #f00, -3px -2px 5px #000, 0px 0px 12px 5px #33CC00 inset; }
三、边框应用图片（ border-image）
border-image的语法：
代码：
#border_image {
margin:0 auto;
height:100px;
line-height:100px;
text-align:center;
font-size:30px;
450px;
border:15px solid #ccc;
border-image:url(images/1.jpg) 70 repeat;
}
<div id="border_image">
请为我镶嵌上漂亮的画框吧
</div>
四、颜色
background-color:rgba(100,120,60,0.5);
五、渐变色彩
CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。
参数：
用法：
六、 文字与字体
text-overflow用来设置是否使用一个省略标记（...）标示对象内文本的溢出。
七、文本阴影text-shadow
八、1、（background-origin）设置元素背景图片的原始起始位置。
background-origin ： border-box | padding-box | content-box;
2、background-clip 用来将背景图片做适当的裁剪以适应实际需要。
background-clip ： border-box | padding-box | content-box | no-clip
3、background-size 设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。
background-size: auto | <长度值> | <百分比> | cover | contain
取值说明：
1、auto：默认值，不改变背景图片的原始高度和宽度；
2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；
3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；
4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；
5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。
4、multiple backgrounds
.demo{
300px;
height: 140px;
border: 1px solid #999;
background-image: url(http://img.mukewang.com/54cf2365000140e600740095.jpg),
url(http://img.mukewang.com/54cf238a0001728d00740095.jpg),
url(http://img.mukewang.com/54cf23b60001fd9700740096.jpg);
background-position: left top, 120px 0, 230px 0;
background-repeat: no-repeat, no-repeat, no-repeat;
margin:0 0 20px 0;
}
.task {
300px;
height: 140px;
border: 1px solid #999;
background:url(http://static.mukewang.com/static/img/logo_index.png) no-repeat left top/80% 40%,
url(http://static.mukewang.com/static/img/logo_index.png) no-repeat right bottom/50% 50%;
}
九、 css3属性选择器
1.属性选择器
<style type="text/css">
a[class^=column]{
background: red;
color:#fff;
}
a[href$=doc]{
background: green;;
color:#fff;
}
a[title*=box]{
background: blue;
color: #fff;
}
</style>
2.结构性伪类选择器—root()
“:root”选择器等同于<html>元素，简单点说：
:root{background:orange}
html {background:orange;}
得到的效果等同。
建议使用:root方法。
3.结构性伪类选择器—not
给表单中除submit按钮之外的input元素添加红色边框，CSS代码可以写成：
form { 200px; margin: 20px auto; }
div { margin-bottom: 20px; }
input:not([type="submit"]){ border:1px solid red; }