[css3]知识点积累

作者：zccst

animation  , keyframes
.rotate {
    -webkit-transform-style: preserve-3d;/*保留被转换的子元素3d属性*/
    -webkit-animation-name: refreshing;
    -webkit-animation-duration: 0.7s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}
@-webkit-keyframes refreshing {
     0% { -webkit-transform: rotateZ(0deg); }
     25% { -webkit-transform: rotateZ(90deg); }
     50% { -webkit-transform: rotateZ(180deg); }
     75% { -webkit-transform: rotateZ(270deg); }
     100% { -webkit-transform: rotateZ(360deg); }
}



-webkit-gradient 线性渐变
第一个参数：linear
第二个参数：两个坐标left top, right top即左上角和右上角，也是0% 0%, 100% 0%
（0%表示最左，最上）
第三个参数：from  rgba
第四个参数：to    rgba
例子：
.nav-mask {
background:-webkit-gradient(linear,left top,right top,from(rgba(255,255,255,0)),to(rgba(255,255,255,.95)));
}
background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,.7)));

第二组参数是,x1 y1, x2 y2,当成颜色渐变体的两个点的坐标就是。x1,x2,y1,y2的取值范围为0%-100%，当x1,x2,y1,y2取值为极值的时候，x1和x2可以取值left（或0%）或right（或100%），,y1和y2可以取值top（或0%）或bottom（或100%）；
当x1等于x2，y1不等于y2，实现垂直渐变，调整y1，y2的值可以调整渐变半径大小；
当y1等于y2，x1不等于x2，实现水平渐变，调整x1，x2的值可以调整渐变半径大小；
当y1不等于y2，x1不等于x2，实现角度渐变，当x1,x2,y1,y2取值为极值的时候接近垂直渐变或水平渐变；
当x1等于x2，y1等于y2，实现没有渐变，取from色，即“ from(颜色值) ”；



display:box情况下的 box-pack，box-flex
box-pack 属性规定当框大于子元素的尺寸，在何处放置子元素。
值: start|end|center|justify;
div#DemoArea{
  display:box;
  box-pack:center;
}
box-align:center;同box-pack的含义。


#inner {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        border: 25px solid yellow;
        padding: 25px;
        background-color: red;
        -ms-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
   }
在 translate 函数当中使用百分比是以该元素的内容区、补白(padding)、边框(border)为标准计算的，为了说明这一点，我们在 innner 元素加上一些 padding 和 border




-webkit-box-flex:3;
box-flex 属性规定框的子元素是否可伸缩其尺寸。
提示：可伸缩元素能够随着框的缩小或扩大而缩写或放大。只要框中有多余的空间，可伸缩元素就会扩展来填充这些空间。
value 元素的可伸缩行。柔性是相对的，例如 box-flex 为 2 的子元素两倍于 box-flex 为 1 的子元素。
div{
    display:-moz-box;
    display:-webkit-box /* 外面是box */
    display:box;
    width:300px;
    border:1px solid black;
}

#p1{
    -moz-box-flex:1.0;
    -webkit-box-flex:2.0;
    box-flex:1.0; /* 里面是box-flex是1.0 */
    border:1px solid red;
}

#p2{
    -moz-box-flex:2.0;
    -webkit-box-flex:1.0;
    box-flex:2.0; /* 里面是box-flex是2.0 */
    border:1px solid blue;
}



vertical-align:-2px;
-2px 表示在父元素bottom向下两个像素
-20% 也表示向下line-height高度的20%
如果开发中使用的是height与line-height相同的取值，会大大减少不同浏览器出现差别的情况



white-space: nowrap;
规定段落中的文本不进行换行

white-space 属性设置如何处理元素内的空白。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。




-webkit-border-top-left-radius:100%;
如果border-radius:100%就是四个角都是100%，相当于把正方形变成圆型。
如果是一个长方形，则border-radius:100%会变成椭圆。
如果只对左上角设置border-top-left-radius:100%表示只有左上角变成圆形。




background新增的3改CSS3属性
（1）background-clip 规定背景的绘制区域。
规定背景的绘制区域：
border-box 背景被裁剪到边框盒。 测试
padding-box 背景被裁剪到内边距框。 测试
content-box 背景被裁剪到内容框。
div{
  width:300px;
  height:300px;
  padding:50px;
  background-color:yellow;
  background-clip:content-box;/*分别试验3个值*/
  border:2px solid #92b901;
}

（2）background-origin 规定背景图片的定位区域。
相对于内容框来定位背景图像。这个比较容易理解就是以谁为准显示图片，到底是以content，padding，还是border为准。
padding-box 背景图像相对于内边距框来定位。
border-box 背景图像相对于边框盒来定位。
content-box 背景图像相对于内容框来定位。
#MyDIV{
    padding:25px;
    border:10px dotted #000000;
    background-image:url('/i/eg_smile.gif');
    background-origin:content-box;/* 依次变化3个值试试 */
    background-repeat:no-repeat;
}
如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。

（3）background-size 规定背景图片的尺寸。
像素表示，background-size:24px 15px;即width=24px，height=15px

百分比表示，如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。
background-size:25%;只有x，没有y。相当于一张图片，在x方向上占父元素的4分之一，在y方向上占完父元素（即默认100%），这样背景中有四张横向排列的图片。
background-size:25% 50%;表示x方向上占父元素的四分之一，y方向上占父元素的二分之一，这样背景中共有8张图片，共两行（y 50%），每行四个图片（x 20%）

注意：如果不想重复，则可以使用background-repeat:no-repeat;

（4）CSS3 允许您为元素使用多个背景图像。
实例  为 body 元素设置两幅背景图片：
body {  background-image:url(bg_flower.gif),url(bg_flower_2.gif); }

复习原来的属性：
background-attachment  scroll | fixed -- 定义背景图片随滚动轴的移动方式
相对于浏览器视窗来说的,不管这个元素在什么地方，如果它的background-attachment为fixed,则它的背景的位置就与它本身无关了，因为它的背景始终是参照浏览器的可见视窗来定位的。


background-position  center/left/top,  x% y%,  Xpx Ypx
第一个值是水平位置，第二个值是垂直位置。
左上角是 0% 0%。右下角是 100% 100%。
如果您仅规定了一个值，另一个值将是 50%。

例子：您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。
body
{
  background-image:url('/i/eg_bg_03.gif');
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:center;
}