[css3]知识点积累

作者：zccst

[b]animation , keyframes[/b]
.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;
}
@[color=red]-webkit[/color]-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); }
}


[b]-webkit-gradient 线性渐变[/b]
第一个参数：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(颜色值) ”；


[b]display:box情况下的 box-pack，box-flex[/b]
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


[b]-webkit-box-flex:3;[/b]
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;
}


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


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

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


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


[b]background新增的3改CSS3属性[/b]
（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;
}