CSS3笔记

文章概述

本篇文章记录CSS3的笔记。

浏览器样式兼容

css样式兼容老版本浏览器，需要在css样式属性加前缀：

firefox: -moz-
safari: -webkit-
chrome: -webkit-
opera: -o-
IE9: -ms-

边框

CSS3边框属性：

border-radius 圆角边框
box-shadow 边框阴影
border-image 边框图片

圆角边框

1 2	border-radius - border-radius 属性是一个简写属性，用于设置四个角 border-*-radius 属性。

border-radius对应以下四个角：

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

1 2	【注意】旧版本Firefox需要前缀-moz-：-moz-border-radius

属性值单位

length 尺寸单位定义圆角的形状。
% 以百分比定义圆角的形状。

语法格式

border-radius: 1-4 length|%
【属性值说明】
- 相当于按以下顺序设置半径：
1> 上左 | 上左水平方向半径/上左垂直方向半径
2> 上右 | 上右水平方向半径/上右垂直方向半径
3> 下右 | 下右水平方向半径/下右垂直方向半径
4> 下左 | 下左水平方向半径/下左垂直方向半径
- 设置值得数量：四个方向如果对角线一方缺少，则和对角有值得相等；
1> 一个值：四个方向半径相等；
2> 两个值：第一个值表示左上和右下，第二个值表示右上和左下;
3> 三个值：第一个值表示左上，第二个值表示右上和左下，第三个值表示右下；
4> 四个值：左上、右上、右下、左下；

单个值

border-radius:2em;
// 等价
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

多个值

border-radius: 2em 1em 4em / 0.5em 3em;
// 等价
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

示例

设置div的圆角？

div{
    border:2px solid;
    border-radius:25px;
    -moz-border-radius:25px; /* Old Firefox */
}

边框阴影

box-shadow 用于向方框添加阴影;

语法格式

box-shadow: h-shadow v-shadow blur spread color inset;
【属性值说明】
h-shadow	必需。水平阴影的位置。允许负值。	
v-shadow	必需。垂直阴影的位置。允许负值。	
blur	可选。模糊距离。	
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。请参阅 CSS 颜色值。
inset	可选。值就是inset,将外部阴影 (outset) 改为内部阴影。

div {
    box-shadow: 10px 10px 5px #888888;
    -moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
}

边框图片

IE11支持

定义语法

通过CSS3的border-image属性，您可以使用图片来创建边框.

border-image是border-image-* 属性的简写属性，用于设置以下属性：

border-image-source 用在边框的图片的路径。
border-image-slice 图片边框向内偏移。
border-image-width 图片边框的宽度。
border-image-outset 边框图像区域超出边框的量。
border-image-repeat 图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)。

示例

div{
    border-image:url(border.png) 30 30 round;
    -moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
    -webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
    -o-border-image:url(border.png) 30 30 round; /* Opera */
}

背景

CSS3背景属性：

background-clip 规定背景的绘制区域。
background-origin 规定背景图片的定位区域。
background-size 规定背景图片的尺寸。

支持新的背景属性的浏览器：

Internet Explorer 9+、
Firefox、
Chrome、
Safari
Opera 。

背景尺寸

background-size 属性规定背景图片的尺寸。
以像素或百分比规定尺寸。

语法格式

background-size: length|%|cover|contain;
【属性值说明】
length	设置背景图像的高度和宽度。
        第一个值设置宽度，第二个值设置高度。
        如果只设置一个值，则第二个值会被设置为 "auto"。
%	    以父元素的百分比来设置背景图像的宽度和高度。
        第一个值设置宽度，第二个值设置高度。
        如果只设置一个值，则第二个值会被设置为 "auto"。
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
        背景图像的某些部分也许无法显示在背景定位区域中。
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

示例

div{
    background:url(img_flwr.gif);
    background-size:80px 60px;
    background-repeat:no-repeat;
}

背景图片定位区域

background-origin 属性规定背景图片的定位区域。
background-origin 属性规定background-position属性相对于什么位置来定位。
背景图片可以放置于content-box(内容区)、padding-box(padding以内)或border-box（边框线以内）区域。

语法格式

background-origin: padding-box|border-box|content-box;
【属性值说明】
padding-box	背景图像相对于内边距框来定位。
border-box	背景图像相对于边框盒来定位。
content-box	背景图像相对于内容框来定位。

示例

div{
    background:url(bg_flower.gif);
    background-repeat:no-repeat;
    background-size:100% 100%;
    -webkit-background-origin:content-box; /* Safari */
    background-origin:content-box;
}

背景绘制区域

background-clip 属性规定背景的绘制区域。

语法格式

background-clip: border-box|padding-box|content-box;
【属性值说明】
border-box	背景被裁剪到边框盒。	
padding-box	背景被裁剪到内边距框。	
content-box	背景被裁剪到内容框。

示例

div{
    background-color:yellow;
    background-clip:content-box;
}

多重背景图

CSS3允许background-image为元素使用多个背景图像，按顺序会重叠。

1
2
3

body{ 
    background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}

文本效果

概览

新的文本属性：

text-shadow 向文本添加阴影。
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。

文本阴影

在 CSS3 中，text-shadow可向文本应用阴影。
能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色：
Internet Explorer 9以及更早的版本，不支持text-shadow属性。

语法格式

text-shadow: h-shadow v-shadow blur color;
【属性值说明】
h-shadow	必需。水平阴影的位置。允许负值。	
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。参阅 CSS 颜色值。

注释：

text-shadow 属性向文本添加一个或多个阴影。
该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。
省略的长度是 0。

示例

1
2
3

h1{
    text-shadow: 5px 5px 5px #FF0000;
}

自动换行

允许对长的不可分割的单词进行分割并换行到下一行。

语法格式

word-wrap: normal|break-word;
【属性值说明】
normal	只在允许的断字点换行（浏览器保持默认处理）。
break-word	在长单词或 URL 地址内部进行换行。

示例

1	p.test {word-wrap:break-word;}

颜色

css3支持hsl，即色调、饱和度、亮度来表示颜色值：

H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：Saturation(饱和度)。取值为：0.0% - 100.0%
L：Lightness(亮度)。取值为：0.0% - 100.0%

1	.test{background-color:hsl(360,50%,50%);}

字体

在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。
通过 CSS3，web 设计师可以使用他们喜欢的任意字体。
当您您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，css中指定@font-face规则，它会在需要时被自动下载到用户的计算机上。

浏览器支持

Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。
Internet Explorer 9+ 支持新的 @font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)。
注释：Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。

语法定义

定义@font-face规则

在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。
如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)；
还可以定义支持其他样式，只需要再写一个@font-face规则，配置指定属性即可；

@font-face规则属性

- font-family	name	必需。规定字体的名称。
- src	URL	必需。定义字体文件的 URL。
- font-stretch	可选。定义如何拉伸字体。默认是 "normal"。
- font-style 可选。定义字体的样式。默认是 "normal"。
- font-weight 可选。定义字体的粗细。默认是 "normal"。
- unicode-range	unicode-range	可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。

示例

自定义外部字体？

<style> 
@font-face{
    font-family: myFirstFont;
    src: url('Sansation_Light.ttf'),
         url('Sansation_Light.eot'); /* IE9+ */
}

div{
    font-family:myFirstFont;
}
</style>

<div>hello world</div>

给自定义字体加粗？

<style> 
/*外部字体*/
@font-face{
    font-family: myFirstFont;
    src: url('/example/css3/Sansation_Light.ttf')
        ,url('/example/css3/Sansation_Light.eot'); /* IE9+ */
}

/*加粗的规则*/
@font-face{
    font-family: myFirstFont;
    /*外部加粗的字体*/
    src: url('/example/css3/Sansation_Bold.ttf') 
        ,url('/example/css3/Sansation_Bold.eot'); /* IE9+ */
    /*重写加粗属性*/
    font-weight:bold;
}

div{
    font-family:myFirstFont;
}
</style>

<div>hello <strong>world</strong></div>

2D3D转换基点

transform-origin 属性允许您改变被转换元素基点位置。
2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。

浏览器支持

Internet Explorer 10、Firefox、Opera 支持 transform-origin 属性。
Internet Explorer 9 支持替代的 -ms-transform-origin 属性（仅适用于 2D 转换）。
Safari 和 Chrome 支持替代的 -webkit-transform-origin 属性（3D 和 2D 转换）。
Opera 只支持 2D 转换。

语法定义

transform-origin: x-axis y-axis z-axis;

x-axis	定义视图被置于 X 轴的何处。可能的值：
        left
        center
        right
        length
        %
y-axis	定义视图被置于 Y 轴的何处。可能的值：
        top
        center
        bottom
        length
        %
z-axis	定义视图被置于 Z 轴的何处。可能的值：
        length

示例

设置旋转元素的基点位置：

div{
    position: absolute;
    background-color: yellow;
    
    transform: rotate(45deg);
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari and Chrome */
    -moz-transform: rotate(45deg); /* Firefox */
    -o-transform: rotate(45deg); /* Opera */
    
    transform-origin:20% 40%;
    -ms-transform-origin:20% 40%; /* IE 9 */
    -webkit-transform-origin:20% 40%; /* Safari and Chrome */
    -moz-transform-origin:20% 40%; /* Firefox */
    -o-transform-origin:20% 40%; /* Opera */
}

2D转换

通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

浏览器支持

Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
Internet Explorer 9 需要前缀 -ms-。

转换

transform 属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

【语法定义】

transform: none|transform-functions;
【属性值】
none 定义不进行转换
transform-functions:
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

平移

通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数：

/* 值translate(50px,100px)把元素从左侧移动50像素，从顶端移动100像素。*/ 
div{
    transform: translate(50px,100px);
    -ms-transform: translate(50px,100px);		/* IE 9 */
    -webkit-transform: translate(50px,100px);	/* Safari and Chrome */
    -o-transform: translate(50px,100px);		/* Opera */
    -moz-transform: translate(50px,100px);		/* Firefox */
}

旋转

通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

/* 值 rotate(30deg) 把元素顺时针旋转 30 度。*/ 
div{
    transform: rotate(30deg);
    -ms-transform: rotate(30deg);		/* IE 9 */
    -webkit-transform: rotate(30deg);	/* Safari and Chrome */
    -o-transform: rotate(30deg);		/* Opera */
    -moz-transform: rotate(30deg);		/* Firefox */
}

缩放

通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：

/* 值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。*/ 
div{
    transform: scale(2,4);
    -ms-transform: scale(2,4);	/* IE 9 */
    -webkit-transform: scale(2,4);	/* Safari 和 Chrome */
    -o-transform: scale(2,4);	/* Opera */
    -moz-transform: scale(2,4);	/* Firefox */
}

斜拉

通过 skew() 方法，元素倾斜给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：

/* 值 skew(30deg,20deg) 围绕 X 轴把元素斜拉 30 度，围绕 Y 轴斜拉 20 度。*/ 
div{
    transform: skew(30deg,20deg);
    -ms-transform: skew(30deg,20deg);	/* IE 9 */
    -webkit-transform: skew(30deg,20deg);	/* Safari and Chrome */
    -o-transform: skew(30deg,20deg);	/* Opera */
    -moz-transform: skew(30deg,20deg);	/* Firefox */
}

矩阵变换

matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
matrix(a,b,c,d,e,f)有六个参数，对应到矩阵如下：

平移：translate(x,y) === matrix(1,0,0,1,x,y)
缩放：scale(x,y) === matrix(x,0,0,y,0,0)
旋转：rotate(x) === matrix(cos(x),-sin(x),sin(x),cos(x),0,0)
斜拉：skew(x,y) === matrix(1,tan(y),tan(x) ,1,0,0)

示例

用matrix方法将div元素旋转30度？

div{
    transform:matrix(0.866,0.5,-0.5,0.866,0,0);
    -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);		/* IE 9 */
    -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);	/* Firefox */
    -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);	/* Safari and Chrome */
    -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);		/* Opera */
}

3D转换

CSS3 允许您使用 3D 转换来对元素进行格式化；
转换是使元素改变形状、尺寸和位置的一种效果。

浏览器支持

Internet Explorer 10 和 Firefox 支持 3D 转换。
Chrome 和 Safari 需要前缀 -webkit-。
Opera 仍然不支持 3D 转换（它只支持 2D 转换）。

转换

transform 属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜，与2D转换用法类似。

【语法定义】

transform: none|transform-functions;
【属性值】
none	定义不进行转换。	
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。	
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。	
translate(x,y)	定义 2D 转换。	
translate3d(x,y,z)	定义 3D 转换。	
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。	
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。	
scale(x,y)	定义 2D 缩放转换。	
scale3d(x,y,z)	定义 3D 缩放转换。	
scaleX(x)	通过设置 X 轴的值来定义缩放转换。	
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。	
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。	
rotate(angle)	定义 2D 旋转，在参数中规定角度。	
rotate3d(x,y,z,angle)	定义 3D 旋转。	
rotateX(angle)	定义沿着 X 轴的 3D 旋转。	
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。	
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。	
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。	
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。	
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。

旋转

rotateX

div{
    transform: rotateX(120deg);
    -webkit-transform: rotateX(120deg);	/* Safari 和 Chrome */
    -moz-transform: rotateX(120deg);	/* Firefox */
}

rotateY

div{
    transform: rotateY(130deg);
    -webkit-transform: rotateY(130deg);	/* Safari 和 Chrome */
    -moz-transform: rotateY(130deg);	/* Firefox */
}

矩阵转换

matrix3d(0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15)有16个参数，对应到矩阵如下：

1 2	平移：translate(x,y,z) === matrix(1,0,0,0,0,1,0,0,0,0,1,0,x,y,z,1) 缩放：scale(x,y,z) === matrix(x,0,0,0,0,y,0,0,0,0,z,0,0,0,0,1)

嵌套元素如何显示

transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。

浏览器支持

Firefox 支持 transform-style 属性。
Chrome、Safari 和 Opera 支持替代的 -webkit-transform-style 属性。

语法定义

transform-style: flat|preserve-3d;
【属性值】
flat	子元素将不保留其 3D 位置。
preserve-3d	子元素将保留其 3D 位置。

js支持

1	domObj.style.transformStyle="preserve-3d"

示例

使被转换的子元素保留其 3D 转换：

div {
    transform: rotateY(60deg);
    transform-style: preserve-3d;
    -webkit-transform: rotateY(60deg);	/* Safari 和 Chrome */
    -webkit-transform-style: preserve-3d;	/* Safari 和 Chrome */
}

透视效果

perspective规定 3D 元素的透视效果。
perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
perspective 属性只影响 3D 转换元素。
常与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。

浏览器支持

目前浏览器都不支持 perspective 属性。
Chrome 和 Safari 支持替代的 -webkit-perspective 属性。

语法格式

perspective: number|none;
【属性值】
number	元素距离视图的距离，以像素计。
none	默认值。与 0 相同。不设置透视。

js支持

1	object.style.perspective=500

示例

div{
    perspective: 500;
    -webkit-perspective: 500; /* Safari 和 Chrome */
}

底部位置

perspective-origin 属性定义3D元素所基于的X轴和Y轴。该属性允许您改变 3D 元素的底部位置。
当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身。

浏览器支持

目前浏览器都不支持 perspective-origin 属性。
Chrome 和 Safari 支持替代的 -webkit-perspecitve-origin 属性。

语法定义

perspective-origin: x-axis y-axis;
【属性值】
x-axis	定义该视图在 x 轴上的位置。默认值：50%。可能的值：
        left
        center
        right
        length
        %
y-axis	定义该视图在 y 轴上的位置。默认值：50%。可能的值：
        top
        center
        bottom
        length
        %

示例

设置 3D 元素的基点位置：

div{
    perspective:150;
    perspective-origin: 10% 10%;
    -webkit-perspective:150;	/* Safari 和 Chrome */
    -webkit-perspective-origin: 10% 10%;	/* Safari 和 Chrome */
}

背向用户显隐

backface-visibility 属性定义当元素背向用户时是否可见。

浏览器支持

只有 Internet Explorer 10+ 和 Firefox 支持 backface-visibility 属性。
Opera 15+、Safari 和 Chrome 支持替代的 -webkit-backface-visibility 属性。

语法支持

backface-visibility: visible|hidden;
【属性值】
visible	背面是可见的。
hidden	背面是不可见的。

js支持

1	object.style.backfaceVisibility="hidden"

示例

div {
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;	/* Chrome 和 Safari */
    -moz-backface-visibility:hidden; 	/* Firefox */
    -ms-backface-visibility:hidden; 	/* Internet Explorer */
}

过渡动画

通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

过渡属性

【transition】

1 2	语法格式： transition: property duration timing-function delay;

transition 过渡的简写属性，用于在一个属性中依次设置四个过渡属性：

transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。
transition-delay 规定过渡效果何时开始。默认是 0。

示例：

div {
    transition: width 1s linear 2s;
    /* Firefox 4 */
    -moz-transition:width 1s linear 2s;
    /* Safari and Chrome */
    -webkit-transition:width 1s linear 2s;
    /* Opera */
    -o-transition:width 1s linear 2s;
}

transition-property

transition-property 属性规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）。

浏览器支持

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-property 属性。
Safari 支持替代的 -webkit-transition-property 属性。
注释：Internet Explorer 9 以及更早版本的浏览器不支持 transition-property 属性。

语法格式

transition-property: none|all|property;
【属性值】
none	没有属性会获得过渡效果。
all	所有属性都将获得过渡效果。
property	定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

transition-duration

transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。

浏览器支持

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-duration 属性。
Safari 支持替代的 -webkit-transition-duration 属性。
注释：Internet Explorer 9 以及更早版本的浏览器不支持 transition-duration 属性。

语法格式

transition-duration: time;
【属性值】
time	规定完成过渡效果需要花费的时间（以秒或毫秒计）。
        默认值是 0，意味着不会有效果。

transition-timing-function

transition-timing-function 属性规定过渡效果的速度曲线。
该属性允许过渡效果随着时间来改变其速度。

浏览器支持

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-timing-function 属性。
Safari 支持替代的 -webkit-transition-timing-function 属性。
注释：Internet Explorer 9 以及更早版本的浏览器不支持 transition-timing-function 属性。

语法格式

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
【属性值】
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	cubic-bezier (x1,y1,x2,y2)
        在 cubic-bezier（三次贝塞尔曲线） 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

示例

基本用法：

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
/* Firefox 4: */
#div1 {-moz-transition-timing-function: linear;}
#div2 {-moz-transition-timing-function: ease;}
#div3 {-moz-transition-timing-function: ease-in;}
#div4 {-moz-transition-timing-function: ease-out;}
#div5 {-moz-transition-timing-function: ease-in-out;}
/* Safari and Chrome: */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}
/* Opera: */
#div1 {-o-transition-timing-function: linear;}
#div2 {-o-transition-timing-function: ease;}
#div3 {-o-transition-timing-function: ease-in;}
#div4 {-o-transition-timing-function: ease-out;}
#div5 {-o-transition-timing-function: ease-in-out;}

cubic-bezier三次贝塞尔曲线函数来规定速度曲线：

#div1 {transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Firefox 4: */
#div1 {-moz-transition-timing-function: cubic-bezier(0,0,0.25,1);}
#div2 {-moz-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-moz-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-moz-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-moz-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Safari and Chrome: */
#div1 {-webkit-transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Opera: */
#div1 {-o-transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-o-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-o-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-o-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-o-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

transition-delay

transition-delay 属性规定过渡效果延迟执行时间。

浏览器支持

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-delay 属性。
Safari 支持替代的 -webkit-transition-delay 属性。
注释：Internet Explorer 9 以及更早版本的浏览器不支持 transition-delay 属性。

语法格式

1
2
3

transition-delay: time;
【属性值】
time	规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。

示例

div {
    transition-delay: 2s;
    -moz-transition-delay: 2s; /* Firefox 4 */
    -webkit-transition-delay: 2s; /* Safari 和 Chrome */
    -o-transition-delay: 2s; /* Opera */
}

浏览器支持

Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
Safari 需要前缀 -webkit-。
Internet Explorer 9 以及更早的版本，不支持 transition 属性。
Chrome 25 以及更早的版本，需要前缀 -webkit-。

过渡规则

CSS3过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：

1 2	1> 规定把过渡效果作用在哪个CSS属性上； 2> 规定渡效效果的时长（没有设置时长，则没有过渡效果）；

过渡效果：开始于指定的CSS属性改变值时。
示例场景：CSS属性改变的典型时间是鼠标指针位于元素上时,当指针移出元素时，它会逐渐变回原来的样式；

<style>
div {
    width:100px;
    height:100px;
    background:yellow;
    
    transition:width 2s;
    -moz-transition:width 2s; /* Firefox 4 */
    -webkit-transition:width 2s; /* Safari and Chrome */
    -o-transition:width 2s; /* Opera */
}

div:hover{
    width:300px;
}
</style>
<div></div>

多属性过渡

如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开：

向宽度、高度和转换添加过渡效果：

div {
    transition: width 2s, height 2s, transform 2s;
    -moz-transition: width 2s, height 2s, -moz-transform 2s;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
    -o-transition: width 2s, height 2s,-o-transform 2s;
}

动画

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

动画属性概览

属性	描述	CSS
@keyframes	规定动画。	3
animation	所有动画属性的简写属性，除了 animation-play-state 属性。	3

animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。	3
animation-fill-mode	规定对象动画时间之外的状态。	3

动画规则

【@keyframes规则】

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
通过 @keyframes 创建的规则，作用于：animation属性。

浏览器支持

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

语法

@keyframes animationname {keyframes-selector {css-styles;}}
【属性值】
animationname	必需。定义动画的名称。
keyframes-selector	必需。动画时长的百分比。
                    合法的值：
                    0-100%
                    from（与 0% 相同）
                    to（与 100% 相同）
css-styles	必需。一个或多个合法的 CSS 样式属性。

示例

根据keyframes规则定义mylove动画?

<style> 
div{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    
    animation:mymove 5s infinite;
    -moz-animation:mymove 5s infinite; /* Firefox */
    -webkit-animation:mymove 5s infinite; /* Safari and Chrome */
    -o-animation:mymove 5s infinite; /* Opera */
}
</style>
<div></div>

定义动画规则方式1： from、to；

@keyframes mymove{
    from {top:0px;}
    to {top:200px;}
}

@-moz-keyframes mymove /* Firefox */{
    from {top:0px;}
    to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */{
    from {top:0px;}
    to {top:200px;}
}

@-o-keyframes mymove /* Opera */{
    from {top:0px;}
    to {top:200px;}
}

定义动画规则方式2： %；

@keyframes mymove{
    0%   {top:0px;}
    25%  {top:200px;}
    50%  {top:100px;}
    75%  {top:200px;}
    100% {top:0px;}
}

@-moz-keyframes mymove /* Firefox */{
    0%   {top:0px;}
    25%  {top:200px;}
    50%  {top:100px;}
    75%  {top:200px;}
    100% {top:0px;}
}

@-webkit-keyframes mymove /* Safari 和 Chrome */{
    0%   {top:0px;}
    25%  {top:200px;}
    50%  {top:100px;}
    75%  {top:200px;}
    100% {top:0px;}
}

@-o-keyframes mymove /* Opera */{
    0%   {top:0px;}
    25%  {top:200px;}
    50%  {top:100px;}
    75%  {top:200px;}
    100% {top:0px;}
}

动画

animation

动画是使元素从一种样式逐渐变化为另一种样式的效果。
可以改变任意多的样式任意多的次数。

浏览器支持

Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。
Safari 和 Chrome 支持替代的 -webkit-animation 属性。
注释：Internet Explorer 9 以及更早的版本不支持 animation 属性。

语法

animation: name duration timing-function delay iteration-count direction;
【属性值】
animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线（同过渡动画速度曲线属性）。
animation-delay	规定在动画开始之前的延迟，以秒或毫秒计。
animation-iteration-count	规定动画应该播放的次数（infinite：无限次播放；n: 数字次数）。
animation-direction	规定是否应该轮流反向播放动画（alternate：反向播放；normal默认: 正常播放）。

示例

div {
    animation:mymove 5s infinite;
    -webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}

动画状态

animation-play-state 属性规定动画正在运行还是暂停。

浏览器支持

Internet Explorer 10、Firefox 以及 Opera 支持 animation-play-state 属性。
Safari 和 Chrome 支持替代的 -webkit-animation-play-state 属性。
Internet Explorer 9 以及更早的版本不支持 animation-play-state 属性。

语法

animation-play-state: paused|running;
【属性值】
paused	规定动画已暂停。	
running	规定动画正在播放。

js支持

1	object.style.animationPlayState="paused"

示例

div {
    animation-play-state:paused;
    -webkit-animation-play-state:paused; /* Safari 和 Chrome */
}

动画效果是否可见

animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。

浏览器支持

Internet Explorer 10、Firefox 以及 Opera 支持 animation-fill-mode 属性。
Safari 和 Chrome 支持替代的 -webkit-animation-fill-mode 属性。
注释：Internet Explorer 9 以及更早的版本不支持 animation-fill-mode 属性。

语法

animation-fill-mode : none | forwards | backwards | both;
【属性】
none	不改变默认行为。
forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards	在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both	向前和向后填充模式都被应用。

示例

1
2
3

h1{
    animation-fill-mode: forwards;
}

子内容多列

通过 CSS3，您能够创建多个列来对文本进行布局 - 就像报纸那样！

创建多列

column-count 属性规定元素应该被划分的列数。

浏览器支持

Internet Explorer 10 和 Opera 支持 column-count 属性。
Firefox 支持替代的 -moz-column-count 属性。
Safari 和 Chrome 支持替代的 -webkit-column-count 属性。
Internet Explorer 9 以及更早版本的浏览器不支持 column-count 属性。

语法

column-count: number|auto;
【属性值】
number	元素内容将被划分的列数。
auto	由其他属性决定列数，比如 "column-width"。

示例

将 div 元素中的文本分为三列：

div{
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari 和 Chrome */
    column-count:3;
}

列间隔

column-gap 属性规定列之间的间隔：

浏览器支持

Internet Explorer 10 和 Opera 支持 column-gap 属性。
Firefox 支持替代的 -moz-column-gap 属性。
Safari 和 Chrome 支持替代的 -webkit-column-gap 属性。
Internet Explorer 9 以及更早版本的浏览器不支持 column-gap 属性。

语法

column-gap: length|normal;
【属性值】
length	把列间的间隔设置为指定的长度。	
normal	规定列间间隔为一个常规的间隔。W3C 建议的值是 1em。

示例

规定列之间 40 像素的间隔：

div {
    -moz-column-gap:40px;		/* Firefox */
    -webkit-column-gap:40px;	/* Safari 和 Chrome */
    column-gap:40px;
}

列规则

column-rule 属性是一个简写属性，用于设置所有 column-rule-* 属性。

浏览器支持

Internet Explorer 10 和 Opera 支持 column-rule 属性。
Firefox 支持替代的 -moz-column-rule 属性。
Safari 和 Chrome 支持替代的 -webkit-column-rule 属性。
Internet Explorer 9 以及更早版本的浏览器不支持 column-rule 属性。

语法

column-rule: column-rule-width column-rule-style column-rule-color;
【属性值】
- column-rule-width	设置列之间的样式宽度规则。
- column-rule-style	设置列之间的样式规则。
- column-rule-color	设置列之间的颜色规则。

示例

规定列之间的宽度、样式和颜色规则：

div {
    -moz-column-rule:3px outset #ff00ff; /* Firefox */
    -webkit-column-rule:3px outset #ff00ff; /* Safari 和 Chrome */
    column-rule:3px outset #ff00ff;
}

column-rule-style

column-rule-style 属性规定列之间的样式规则。

语法

column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;
【属性值】
none	定义没有规则。	
hidden	定义隐藏规则。	
dotted	定义点状规则。	
dashed	定义虚线规则。	
solid	定义实线规则。	
double	定义双线规则。	
groove	定义 3D grooved 规则。该效果取决于宽度和颜色值。
ridge	定义 3D ridged 规则。该效果取决于宽度和颜色值。	
inset	定义 3D inset 规则。该效果取决于宽度和颜色值。	
outset	定义 3D outset 规则。该效果取决于宽度和颜色值。

示例

div{
    -moz-column-rule-style:dotted; /* Firefox */
    -webkit-column-rule-style:dotted; /* Safari 和 Chrome */
    column-rule-style:dotted;
}

column-rule-width

column-rule-width 属性规定列之间样式的宽度规则。

语法

column-rule-width: thin|medium|thick|length;
【属性值】
thin	定义纤细规则。	
medium	定义中等规则。	
thick	定义宽厚规则。	
length	规定规则的宽度。

示例

div {
    -moz-column-rule-width:1px; /* Firefox */
    -webkit-column-rule-width:1px; /* Safari 和 Chrome */
    column-rule-width:1px;
}

column-rule-color

column-rule-color 属性规定列之间样式的颜色规则。

语法

1
2
3

column-rule-color: color;
【属性值】
color	规定颜色规则。请参阅 CSS 颜色值。

示例

div {
    -moz-column-rule-color:#ff0000; /* Firefox */
    -webkit-column-rule-color:#ff0000; /* Safari 和 Chrome */
    column-rule-color:#ff0000;
}

容器界面

在CSS3中，新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。

用户控制容器大小

resize 属性规定是否可由用户调整元素尺寸。

浏览器支持

Firefox、Chrome 以及 Safari 支持 resize 属性。

语法

resize: none|both|horizontal|vertical;
【属性值】
none	用户无法调整元素的尺寸。
both	用户可调整元素的高度和宽度。
horizontal	用户可调整元素的宽度。
vertical	用户可调整元素的高度。

示例

规定可以由用户调整 div 元素的大小：

div {
    resize:both;
    overflow:auto;
}

容器内容与修饰

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

浏览器支持

Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。
Firefox 支持替代的 -moz-box-sizing 属性。

语法

box-sizing: content-box|border-box|inherit;
【属性值】
content-box	在宽度和高度之外绘制元素的内边距和边框。

border-box	通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit	    规定应从父元素继承 box-sizing 属性的值。

示例

div {
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    width:50%;
    float:left;
}

容器轮廓偏移

outline-offset 属性对轮廓进行偏移，并在边框边缘进行绘制。

浏览器支持

所有主流浏览器都支持 outline-offset 属性，除了 Internet Explorer。

轮廓与边框不同点

轮廓不占用空间
轮廓可能是非矩形

语法

outline-offset: length|inherit;
【属性】
length	轮廓与边框边缘的距离。
inherit	规定应从父元素继承 outline-offset 属性的值。

示例

规定边框边缘之外 15 像素处的轮廓：

div{
    border:2px solid black;
    outline:2px solid red;
    outline-offset:15px;
}

函数

CSS 有以下几个函数：

函数	描述	CSS 版本
attr()	返回选择元素的属性值。	2
calc()	允许计算 CSS 的属性值，比如动态计算长度值。	3
linear-gradient()	创建一个线性渐变的图像	3
radial-gradient()	用径向渐变创建图像。	3
repeating-linear-gradient()	用重复的线性渐变创建图像。	3
repeating-radial-gradient()	类似 radial-gradient()，用重复的径向渐变创建图像。	3

属性值

attr() 函数返回选择元素的属性值。

语法

1
2
3

attr(attribute-name)
【属性值】
attribute-name	必须。HTML 元素的属性名。

示例

1
2
3

a:after {
    content: " (" attr(href) ")";
}

动态计算长度

calc() 函数用于动态计算长度值。

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值(包括百分号)都可以使用calc()函数进行计算；
calc()函数支持 “+”, “-“, “*”, “/“ 运算；
calc()函数使用标准的数学运算优先级规则；

语法

1
2
3

calc(expression)
【属性值】
expression	必须，一个数学表达式，结果将采用运算后的返回值。

示例

#div1 {
    position: absolute;
    left: 50px;
    width: calc(100% - 100px);
    border: 1px solid black;
    background-color: yellow;
    padding: 5px;
    text-align: center;
}

线性渐变

linear-gradient() 函数用于创建一个线性渐变的 “图像”。

线性渐变，需要设置起始点和终止色。至少两种颜色，当然也会可以指定更多的颜色去创建更复杂的渐变效果。

语法

background: linear-gradient(direction, color-stop1, color-stop2, ...);
【属性值】
direction	用角度值指定渐变的方向（或角度）。
color-stop1, color-stop2,...	用于指定渐变的起止颜色。

示例

线性渐变，从红色开始，转为黄色，再到蓝色?

#grad {
    background: -webkit-linear-gradient(red,yellow,blue); /* Safari5.1-6.0*/
    background: -o-linear-gradient(red,yellow,blue); /* Opera 11.1-12.0 */
    background: -moz-linear-gradient(red,yellow,blue); /* Firefox 3.6-15*/
    background: linear-gradient(red,yellow,blue); /* 标准语法 */
}

径向渐变

radial-gradient() 函数用径向渐变创建 “图像”。

径向渐变由中心点定义。为了创建径向渐变你必须设置两个终止色。

语法

background: radial-gradient(shape size at position, start-color, ..., last-color);
【属性值】
shape	确定圆的类型:
        ellipse (默认): 指定椭圆形的径向渐变。
        circle ：指定圆形的径向渐变
        size	定义渐变的大小，可能值：
        farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
        closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
        closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
        farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
position	定义渐变的位置。可能值：
        center（默认）：设置中间为径向渐变圆心的纵坐标值。
        top：设置顶部为径向渐变圆心的纵坐标值。
        bottom：设置底部为径向渐变圆心的纵坐标值。
start-color, ..., last-color	用于指定渐变的起止颜色。

示例

椭圆形的径向渐变

#grad {
  background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1- 6.0 */
  background: -o-radial-gradient(red, green, blue); /* Opera 11.6-12.0 */
  background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6-15 */
  background: radial-gradient(red, green, blue); /* 标准语法 */
}

圆形径向渐变:

#grad {
  background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari */
  background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 to 15 */
  background: radial-gradient(circle, red, yellow, green); /* 标准语法 */
}

不同尺寸大小关键字的使用:

#grad1 {
  /* Safari 5.1 to 6.0 */
  background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); 
  /* For Opera 11.6 to 12.0 */
  background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
  /* For Firefox 3.6 to 15 */
  background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
  /* 标准语法 */
  background: radial-gradient(closest-side at 60% 55%,blue,green,yellow,black);
}

重复线性渐变

repeating-linear-gradient() 函数用于创建重复的线性渐变 “图像”。

语法

background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);
【属性值】
angle	定义渐变的角度方向。从 0deg 到 360deg，默认为 180deg。
side-or-corner	指定线性渐变的起始位置。由两个关键字组成：第一个为指定水平位置(left 或 right)，第二个为指定垂直位置（top 或bottom）。 顺序是随意的，每个关键字都是可选的。
color-stop1, color-stop2,...	指定渐变的起止颜色，由颜色值、停止位置（可选，使用百分比指定）组成。

示例

#grad1 {
    height: 200px;
    background: -webkit-repeating-linear-gradient(45deg,red,blue 7%,green 10%); /* For Safari 5.1 to 6.0 */
    background: -o-repeating-linear-gradient(45deg,red,blue 7%,green 10%); /* For Opera 11.1 to 12.0 */
    background: -moz-repeating-linear-gradient(45deg,red,blue 7%,green 10%); /* For Firefox 3.6 to 15 */
    background: repeating-linear-gradient(45deg,red,blue 7%,green 10%); /* 标准语法 (必须在最后) */
}

重复径向渐变

repeating-radial-gradient()用重复的径向渐变创建图像。用法类似radial-gradient()。