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 */ }
