background-sizing:【auto】/【x,y】/【n%,m%】/【cover】/【contain】
设置背景图片的大小：
auto是自动，图片原来多大就多大；
x,y是指定具体值，单位为px；
n%,m%是指定背景图的长宽比例，相对的是div(本元素)；
cover:是将背景图等比例缩放，缩放到刚好全部占满本元素为止（这种情况可能长或宽其中之一会溢出而被舍弃）;
contain:是将背景图等比例缩放，缩放到刚好长或宽刚好满足100%铺满本元素的长或宽即可（这种情况可能出现有长或宽不足100%）
设置背景图片的大小：
auto是自动，图片原来多大就多大；
x,y是指定具体值，单位为px；
n%,m%是指定背景图的长宽比例，相对的是div(本元素)；
cover:是将背景图等比例缩放，缩放到刚好全部占满本元素为止（这种情况可能长或宽其中之一会溢出而被舍弃）;
contain:是将背景图等比例缩放，缩放到刚好长或宽刚好满足100%铺满本元素的长或宽即可（这种情况可能出现有长或宽不足100%）
2015-07-16
background-clip: padding-box;
//裁剪背景图片。这个要个background-origin配合理解。如果：
background-origin:padding-box;
//表示，图片将从div左上角的padding部分开始显示；如果我此刻希望把落在padding部分的背景图片裁剪掉，只剩下content部分的背景图，就可以这样做：
background-clip:content-box;
注意这种情况和直接使用background-origin:content-box的区别！对于用户而言，显示出来的背景图片的内容是不一样的
//裁剪背景图片。这个要个background-origin配合理解。如果：
background-origin:padding-box;
//表示，图片将从div左上角的padding部分开始显示；如果我此刻希望把落在padding部分的背景图片裁剪掉，只剩下content部分的背景图，就可以这样做：
background-clip:content-box;
注意这种情况和直接使用background-origin:content-box的区别！对于用户而言，显示出来的背景图片的内容是不一样的
2015-07-16
一个div，设定背景图片，图片将从哪里开始显示。因为一个div可能有padding部分、border部分和content部分。因此，背景图默认将从左上角的padding部分开始显示，css3有如下控制属性：
background-origin:border-box/padding-box/content-box;
含义不言而喻
background-origin:border-box/padding-box/content-box;
含义不言而喻
2015-07-16
text-shadow: 12px 20px 10px rgba(255,0,0,0.5);
//为文字添加阴影效果，阴影在文字下方往右偏移12px，向下偏移20px,模糊程度为10px,阴影颜色为红色,不透明度为0.5
//为文字添加阴影效果，阴影在文字下方往右偏移12px，向下偏移20px,模糊程度为10px,阴影颜色为红色,不透明度为0.5
2015-07-16
@font-face {
font-family: "MOOC Font";
src: url("http://www.imooc.com/Amaranth-BoldItalic.otf");
}
//在css样式中声明如上语句，就可以使用客户端没有安装过的字体MOOC Font了，此处，src的值必须是该字体对应的网络位置。使用时，正常使用，如：
font-family:"MOOC Font";
font-family: "MOOC Font";
src: url("http://www.imooc.com/Amaranth-BoldItalic.otf");
}
//在css样式中声明如上语句，就可以使用客户端没有安装过的字体MOOC Font了，此处，src的值必须是该字体对应的网络位置。使用时，正常使用，如：
font-family:"MOOC Font";
2015-07-16
结合使用
text-overflow:ellipsis;
overflow:hidden;
当文本过长无法显示完时，可以自动生成省略号。非常实用！
text-overflow:ellipsis;
overflow:hidden;
当文本过长无法显示完时，可以自动生成省略号。非常实用！
2015-07-16
border-image:url(http://img1.sycdn.imooc.com//52e22a1c001406e03040221.jpg) 50 repeat;//重复
border-image:url(http://img1.sycdn.imooc.com//52e22a1c001406e03040221.jpg) 50 stretch;//拉伸
border-image:url(http://img1.sycdn.imooc.com//52e22a1c001406e03040221.jpg) 50 round;//压缩
border-image:url(http://img1.sycdn.imooc.com//52e22a1c001406e03040221.jpg) 50 stretch;//拉伸
border-image:url(http://img1.sycdn.imooc.com//52e22a1c001406e03040221.jpg) 50 round;//压缩
2015-07-16
/*使用伪元素制作导航列表项分隔线*/
.nav li:after{
position:absolute;
right:0;
content:'';
width:1px;
height:100%;
background-image:linear-gradient(to bottom, #f65f57,#f65f57,#f65f57,#666,#f65f57, #f65f57,#f65f57);
display:inline-block;
}
/*删除第一项和最后一项导航分隔线*/
.nav li:last-child:after{
display:none;
}
.nav li:after{
position:absolute;
right:0;
content:'';
width:1px;
height:100%;
background-image:linear-gradient(to bottom, #f65f57,#f65f57,#f65f57,#666,#f65f57, #f65f57,#f65f57);
display:inline-block;
}
/*删除第一项和最后一项导航分隔线*/
.nav li:last-child:after{
display:none;
}
2015-07-15
垂直旋转还可以，神马3D舞台布景。。。。。。。。。臣妾做不到哇/(ㄒoㄒ)/~~
@keyframes rotate{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
li:hover{
animation:rotate 5s ease .1s;
}
@keyframes rotate{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
li:hover{
animation:rotate 5s ease .1s;
}
2015-07-14
看不到效果加 —webkit- 试试
@keyframes changeColor {
0% {
background:red;
}
50% {
background:green;
}
100%{
background:blue;
}
}
div:hover {
animation-name: changeColor;
-webkit-animation-duration: 10s;
animation-timing-function: ease-out;
animation-delay: 0s;
}
@keyframes changeColor {
0% {
background:red;
}
50% {
background:green;
}
100%{
background:blue;
}
}
div:hover {
animation-name: changeColor;
-webkit-animation-duration: 10s;
animation-timing-function: ease-out;
animation-delay: 0s;
}
2015-07-14
语法规则：
animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*
它和transition中的transition-timing-function一样，
animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*
它和transition中的transition-timing-function一样，
2015-07-14
设置动画播放方式
animation-timing-function属性主要用来设置动画播放方式。主要让元素根据时间的推进来改变属性值的变换速率，简单点说就是动画的播放方式。
animation-timing-function属性主要用来设置动画播放方式。主要让元素根据时间的推进来改变属性值的变换速率，简单点说就是动画的播放方式。
2015-07-14
设置动画播放时间
animation-duration主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。单位：S秒
语法规则
animation-duration: <time>[,<time>]*
取值<time>为数值，单位为秒，其默认值为“0”，这意味着动画周期为“0”，也就是没有动画效果（如果值为负值会被视为“0”）。
animation-duration主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。单位：S秒
语法规则
animation-duration: <time>[,<time>]*
取值<time>为数值，单位为秒，其默认值为“0”，这意味着动画周期为“0”，也就是没有动画效果（如果值为负值会被视为“0”）。
2015-07-14