1、background-Origin属性指定了背景图像的位置区域。content-box, padding-box,和 border-box区域内可以放置背景图像。注意：背景色是不起作用的
2、background-clip背景剪裁属性是从指定位置开始绘制。也有三个值content-box, padding-box,和 border-box
3、css3渐变，渐变也支持透明度（transparent），可用于创建减弱变淡的效果。
repeating-linear-gradient() 函数用于重复线性渐变，需要设置高度，和每个循环颜色的占高比例
#grad1 {
height: 800px;
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
4、字体定义
@font-face{
font-family: myFirstFont; //规定字体的名称
src: url('Sansation_Light.ttf') //定义字体文件的 URL。
,url('Sansation_Light.eot'); /* IE9 */
}
div{
font-family:myFirstFont;
}
相当于是定义了一个字体变量，在稍后的css样式中引用此字体变量
5、2D和3D转换
transform（转换）是用于元素的转换属性，向元素应用 2D 或 3D 转换。属性值是一个函数，有：
- translate() 移动
- rotate() 旋转
- scale() 缩放
- skew() 倾斜
- matrix() 混合转换
6、css3过渡动画，某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。使用元素属性transition（过渡）
有三点
- 指定要添加效果的CSS属性
- 指定效果的持续时间。
- 最终触发时的状态
div{
width:100px;
height:100px;
background:red;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}
div:hover{
width:300px;
}
要添加多个样式的变换效果，添加的属性由逗号分隔：
div
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
注意：转换transform属性也可以用于过渡动画
7、@keyframes关键帧动画
实质就是使用@keyframes规则创建一个自定义的动画，然后使用css属性animation执行这自定义的动画名称
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s; //此处是使用自定义的动画
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
//以下是自定义动画名称
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
} @-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
注意一个属性animation-fill-mode，规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。即可以使动画停留在最后的状态
8、弹性盒子
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
利用弹性盒子水平垂直居中，flex弹性盒子的子元素水平和垂直方向都有流动性
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: auto;
}
9、多媒体查询
可以在css文件内使用，也可以在html内使用link标签引入不同的css文件
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">