css3新特性：
1.css3重要模块：
1.1选择器
1.2盒模型
1.3背景和边框
1.4文字特效
1.5 2D/3D转换
1.6动画
1.7多列布局
1.8用户界面
2.css3边框
2.1 border-radius//圆角
<div>border-radius</div>div{ ???border:2px solid #a1a1a1; ???padding:10px 40px; ???background:#dddddd; ???width:30px; ???border-radius:25px; ???-webkit-border-radius:25px; ???-ms-border-radius:25px; ???-o-border-radius:25px; ???-moz-border-radius:25px;}2.2 box-shadow //阴影盒
<div></div>div{ ???width:300px; ???height:200px; ???background:yellow; ???box-shadow:10px(h-shadow) 10px(v-shadow) 5px(blur) 10px(spread) ?#888;}box-shadow:h-shadow(必须，水平阴影的位置，默认right，负值为left)，v-shadow(必须，垂直阴影的位置，默认bottom，负值为top。),blur（可选，模糊的距离)，spread（可选，阴影的大小比如10px（扩大10px）,允许负值），color（可选。阴影的颜色），inset（可选，从外层的阴影（开始时）改变阴影内侧阴影）2.3 border-image //边界图片
使用的图片素材可多样化。
<div id="round">这里，图像平铺（重复）来填充该区域。</div><br><div id="stretch">这里，图像被拉伸以填充该区域。</div>div{ ???border:15px solid transparent; ???width:250px; ???padding:10px 20px;}#round{ ???-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */ ???-o-border-image:url(border.png) 30 30 round; /* Opera */ ???border-image:url(border.png) 30 30 round;}#stretch{ ???-webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 and older */ ???-o-border-image:url(border.png) 30 30 stretch; /* Opera */ ???border-image:url(border.png) 30 30 stretch;}语法：boder-image:source(url(地址))，slice（图像边界向内偏移），width（图像边界的宽度），outset（用于指定在边框外部绘制border-image-area的量），repeat（用于设置图像边界是否应重复（repeat），拉伸（stretch），或填满（round））3背景图片
background-image;//可支持多张图片
background-size;//设置图片的尺寸大小
backgruond-origin;//指定了背景图片的位置区域
background-clip;//背景裁剪属性是从指定位置开始绘制
3.1.background-image
body{ ???background-image:url(123.png),url(456.png);
background-position:right bottom,letf top; ???background-repeat:no-repeat, repeat;}>第一张填充,位置在右下，第二张填充位置在左上。3.2.background-size
css3以前，背景图像大小由图像的实际大小来决定的，现在css3中可以指定背景图片大小。
可指定像素或者百分比大小，指定的大小是相对于父元素的宽度和高度的百分比大小。
body{ ???background:url(123.png); ???background-size:80px 60px; ???background-repeat:no-repeat; ???padding-top:40px;} ?
body{ ???background:url(123.png); ???background-size:100% 100%; ???background-repeat:no-repeat; ???padding-top:40px;} 3.3.background-origin;
div{ ????margin: 20px; ????width: 300px; ????border:1px solid black; ????padding:35px; ????background-image:url(img/20170604001124.png); ????background-repeat:no-repeat; ????background-position:left;}#div1{ ??? background-origin:border-box; }
#div2{ ?????background-origin:content-box;}
#div3{
background-origin:padding-box;
}<p>背景图像边界框的相对位置：</p> <div id="div1"> ????Lorem ipsum dolor sit amet, ??</div> ????????<p>背景图像的内容相对位置的内容框：</p> <div id="div2"> ???Lorem ipsum dolor sit amet, ?</div>
<p>背景图像的padding相对位置的内容框：</p>
<div id="div3">
Lorem ipsum dolor sit amet,
</div> 3.4.background-clip;
div{ ???margin: 20px; ???width: 300px; ???border:10px dotted black; ???????padding:35px; ???background-image:url(img/20170604001124.png); ???background-repeat:no-repeat; ???background-position:left; ???background-color: yellow;}#div1{ ???background-clip:border-box;}#div2{ ???background-clip:content-box;}#div3{ ???background-clip:padding-box;} ???<p>没有裁剪</p><div id="div1"> ??Lorem ipsum dolor sit amet, ?</div><p>从内容区开始绘制</p><div id="div2"> ???Lorem ipsum dolor sit amet, </div><p>绘制padding的区域</p><div id="div3"> ???Lorem ipsum dolor sit amet, </div> ???补充下：
- 用逗号隔开每组 background 的缩写值；
- 如果有 size 值，需要紧跟 position 并且用 "/" 隔开；
- 如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。
- background-color 只能设置一个
4.渐变（Gradients）
css3渐变可以让你在两种或者多个指定的颜色之间显示平稳的过度。
css3定义了两种渐变方式
- 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
- 径向渐变（Radial Gradients）- 由它们的中心定义
语法：background：linear-gradients，radial-gradients。
线性渐变从上到下，红色到绿色再到蓝色#bgg{ ???width: 200px; ???height: 100px; ???background: linear-gradient(red,green,blue);}从左到右，红到蓝#bgg{ ???width: 200px; ???height: 100px; ???background: -webkit-linear-gradient(right, red, blue); ???background: -moz-linear-gradient(right, red, blue); ???background: -o-linear-gradient(right, red, blue); ???background: linear-gradient(to right, red, blue);}从左上角到右下角的线性渐变：#bgg{ ?background: -webkit-linear-gradient(left top, red , blue); ??background: -o-linear-gradient(bottom right, red, blue); ?background: -moz-linear-gradient(bottom right, red, blue); ?background: linear-gradient(to bottom right, red , blue);}带有指定的角度的线性渐变：#bgg{ ?background: -webkit-linear-gradient(180deg, red, blue); ?background: -o-linear-gradient(180deg, red, blue); ?background: -moz-linear-gradient(180deg, red, blue); ??background: linear-gradient(180deg, red, blue);}从左到右的线性渐变，带有透明度：#bgg{ ?background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); ??background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); ??background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); ?background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); }径向渐变形状为圆形的径向渐变：#bgg{ ?background: -webkit-radial-gradient(circle, red, yellow, green); ??background: -o-radial-gradient(circle, red, yellow, green); ?background: -moz-radial-gradient(circle, red, yellow, green); ?background: radial-gradient(circle, red, yellow, green);}颜色结点不均匀分布的径向渐变：#bgg{ ?background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); ??background: -o-radial-gradient(red 5%, green 15%, blue 60%); ??background: -moz-radial-gradient(red 5%, green 15%, blue 60%); ??background: radial-gradient(red 5%, green 15%, blue 60%); }颜色结点均匀分布的径向渐变：#grad { ?background: -webkit-radial-gradient(red, green, blue); ?background: -o-radial-gradient(red, green, blue); ?background: -moz-radial-gradient(red, green, blue); ?background: radial-gradient(red, green, blue);}5.2D转换
5.1 translate()//根据左（x轴）和顶部（y轴）位置给定的参数，从当前元素位置移动。
//从左边移动50个像素，并且从顶部移动100个像素。
div{ ??transform: translate(50px,100px); ???-ms-transform: translate(50px,100px); ???-webkit-transform: translate(50px,100px);}
//垂直水平居中
div{
position:absolute;
top:50%;
left:50%; ??transform: translate(-50%,-50%); ???-ms-transform: translate(-50%,-50%); ???-webkit-transform: translate(-50%,-50%);}5.2 rotate()//在一个给定度数顺时针旋转的元素。负值是云校园的，这样是元素逆时针旋转
顺时针旋转30度。div{ ???transform:rotate(30deg); ???-ms-transform:rotate(30deg); ???-webkit-transform: rotate(30deg);}逆时针旋转30度。div{ ???transform:rotate(-30deg); ???-ms-transform:rotate(-30deg); ???-webkit-transform: rotate(-30deg);}5.3 scale()//该元素增加或减少的大小，取决于宽度（x轴）和高度（y轴）的参数。
第一个参数是原来大小的2倍，第二个参数是原来高度的3倍。div{ ???-ms-transform:scale(2,3); /* IE 9 */ ???-webkit-transform: scale(2,3); /* Safari */ ???transform: scale(2,3); /* 标准语法 */}5.4 skew()//包含两个参数值，分别表示x轴和y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负数表示向相反方向倾斜。
语法：transform:skew(<angle>[,<angle>]);向左倾斜30度，向底部倾斜20度div{transform: skew(30deg,20deg);-ms-transform: skew(30deg,20deg); /* IE 9 */-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */}向右倾斜30度，向顶部倾斜20度div{transform: skew(-30deg,-20deg);-ms-transform: skew(-30deg,-20deg); /* IE 9 */-webkit-transform: skew(-30deg,-20deg); /* Safari and Chrome */}5.5 matrix()//有6个参数，包含旋转，缩放，平移，和倾斜功能
旋转30度
div{transform:matrix(0.866,0.5,-0.5,0.866,0,0);-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */}
css3新特性
原文地址：http://www.cnblogs.com/MJ-MY/p/8035270.html