CSS3学习笔记2

与背景相关的新增属性：

background-clip:指定背景的显示范围。(一般有显示内容，padding,border,margin)

background-origin:指定绘制背景图像时的起点

background-size:背景中图像的尺寸

background-break:内联元素的背景图像进行平铺时的循环方式。

在firefox中，除了background-size外其他三个都要加上“-moz”且background-break要写成

“-moz-background-inline-policy”

在sarifi,chrome,opera中，除了background-break之外的其他三个都要加上“-webkit”

background-clip:

border(包括边框区域）

padding(不包括边框区域）

background-origin:

padding(默认）

border

content

示例：

div{
background-color: black;
background-image: url(flower-green.png);
background-repeat: no-repeat;
border: dashed 15px green;
padding: 30px;
color:white;
font-size:2em;
font-weight:bold;

}
div.div1{
-moz-background-origin: border;
-webkit-background-origin: border;
}
div.div2{
-moz-background-origin: padding;
-webkit-background-origin: padding;
}
div.div3{
-moz-background-origin: content;
-webkit-background-origin: content;
}

background-size:40px 20px

-webkit-background-size:40px 20px

background-break:

bounding-box(背景图像在整个内联元素中进行平铺）

each-box(在每一行中进行平铺）

continuous(下一行中的图像紧接着上一行中的图像继续平铺）

在一个元素中显示多个背景图像。

div{
background-image:url(flower-red.png), url(flower-green.png),url(sky.jpg);
background-repeat: no-repeat, repeat-x, no-repeat;
background-position: 3% 98%,85%, center center,  top;
width: 300px;
padding: 90px 0px;
}

border-radius：绘制圆角边框

div{
border: solid 5px blue;
border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
-webkit-border-radius: 20px;
background-color: skyblue;
padding: 20px;
width: 180px;
}

可以指定两个半径：

border-radius:40px 20px

在chrome与safari浏览器中，会绘制一个椭圆形边框，第一个半径为椭圆的水平方向半径，第一个垂直方向半径，

在firefox与opera中，第一个为边框左上角与右下角的半径，第二个为右上角与左下角的半径。

绘制四个角不同的圆角边框：

border: solid 5px blue;
border-radius-topleft: 10px;
border-radius-topright: 20px;
border-radius-bottomright: 30px;
border-radius-bottomleft: 40px;

使用图像边框：

div{
border: solid 5px;
border-image: url(borderimage.png) 18 18 18 18;
-webkit-border-image: url(borderimage.png) 18 18 18 18;
-moz-border-image: url(borderimage.png) 18 18 18 18;
width:300px;
}

参数依次为：图像文件路径，浏览器把图像分割时的上边距，右边距，下边距，左边距。

也可以指定边框宽度：border-image: url(borderimage.png) 20 20 20 20 / 20px;

浏览器将边框所用图像自动分割为9部分后，中央图像会自动拉伸。

可以在border-image属性中指定四条边的图像是以拉伸的方式显示还是以平铺的方式显示，方法如下：

border-image:url A B C D/border-width topbottom leftright

最后两个参数可以指定的值为：repeat(平铺） stretch(拉伸）round(与repeat类似，区别在于如果最后显示的一幅图像不到图像的一般，则不显示，其他全部扩大平铺完整，反之类似）

transform功能

实现文字或图像的变形处理，分别是旋转，缩放，倾斜，移动。

scale(0.5,2):表示水平方向缩小50%，垂直方向放大一倍。

-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-o-transform: scale(0.5);

skew(30deg,30deg):水平方向倾斜30度，垂直方向倾斜30度。只指定一个参数时只在水平方向倾斜。

-webkit-transform: skew(30deg,30deg);
-moz-transform: skew(30deg,30deg);
-o-transform: skew(30deg,30deg);

translate(50px,50px):水平方向移动50px，垂直方向移动50px。只指定一个参数时只在水平方向移动。

rotate(50deg)：顺时针旋转50度。

对一个元素使用多种变形：

-webkit-transform:  translate(150px, 200px) rotate(45deg) scale(1.5);
-moz-transform: translate(150px, 200px)  rotate(45deg)  scale(1.5) ;
-o-transform:  translate(150px, 200px) rotate(45deg)  scale(1.5);

transform-origin:指定变形的基准点。

//修改变形基准点
-webkit-transform-origin: left bottom;
-moz-transform-origin: left bottom;
-o-transform-origin: left bottom;

动画

Transitions功能

通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另外一个属性值来实现动画功能。

transition:proerty duration timing-function

示例：

div{
background-color: #ffff00;
-webkit-transition: background-color 1s linear;
-moz-transition: background-color 1s linear;
-o-transition: background-color 1s linear;
}
div:hover{
background-color: #00ffff;
}
//同时指定多个属性值：
div{
background-color: #ffff00;
color: #000000;
width: 300px;
-webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;
-moz-transition:  background-color 1s linear, color 1s linear, width 1s linear;
-o-transition:  background-color 1s linear, color 1s linear, width 1s linear;
}
div:hover{
background-color: #003366;
color: #ffffff;
width: 400px;
}

Animations

通过定义多个关键帧以及每个关键帧中元素的属性值来实现更为复杂的动画效果。

创建关键帧的集合

@-webkit-keyframes 关键帧集合名{创建关键帧的代码}

创建关键帧的代码类似如下：

40%{

//本关键帧的样式代码

}

使用示例如下：

div{
background-color: red;
}
@-webkit-keyframes mycolor{
0%{
background-color: red;
}
40%{
background-color: darkblue;
}
70%{
background-color: yellow;
}
100%{
background-color: red;
}
}
div:hover{
-webkit-animation-name: mycolor;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
}

如果要实现多个属性值同时变化的动画效果，只需在各个关键帧同时指定这些属性值就可以了。

可以通过指定animation-iteration-count: infinite来让动画循环播放，也可具体指定次数。

实现动画的方法

linear:在动画开始到结束时以同样的速度进行改变。

ease-in:开始时速度很慢，然后速度沿着曲线值进行加快。

ease-out:开始时速度很快，然后速度沿着曲线值进行放慢。

ease:开始时很慢，然后速度沿着曲线值进行加快，然后速度沿着曲线值进行放慢。

ease-in-out:开始时很慢，然后速度沿着曲线值进行加快，然后速度沿着曲线值进行放慢。

实现网页的淡入效果。通过改变页面的opacity属性值。

@-webkit-keyframes fadein{
0%{
opacity: 0;
background-color: white;
}
100%{
opacity: 1;
background-color: white;
}
}
body{
-webkit-animation-name: fadein;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
}