CSS3 学习笔记

/* No.1: CSS3 边框 */
/* CSS3 边框
 * 创建圆角边框，向矩形添加阴影，使用图片来绘制边框
 * border-radius -- 设置所有四个 border-*-radius 属性的简写属性 */
	border:2px solid;
	border-radius:25px;
	-moz-border-radius:25px; /* Old Firefox */

/* box-shadow -- 向方框添加一个或多个阴影 */
	box-shadow: 10px 10px 5px #888888;

/* border-image -- 设置所有 border-image-* 属性的简写属性 */
	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 */

/* No.2: CSS3 背景 */
/* CSS3 背景
 * 包含多个新的背景属性，提供了对背景更强大的控制
 * background-size -- 规定背景图片的尺寸 */
	background:url(bg_flower.gif);
	-moz-background-size:63px 100px; /* 老版本的 Firefox */
	background-size:63px 100px;
	background-repeat:no-repeat;

/* background-origin -- 规定背景图片的定位区域(padding-box|border-box|content-box) */
	background:url(bg_flower.gif);
	background-repeat:no-repeat;
	background-size:100% 100%;
	-webkit-background-origin:content-box; /* Safari */
	background-origin:content-box;

/* background-image -- 为元素使用多个背景图像 */
	background-image:url(bg_flower.gif),url(bg_flower_2.gif);

/* background-clip -- 规定背景的绘制区域(border-box|padding-box|content-box) */
	padding:25px;
	border:10px dotted #000000;
	background-color:yellow;
	background-clip:content-box;

/* No.3: CSS3 文本效果 */
/* CSS3 文本效果
 * 新的文本特性.文本阴影/自动换行
 * text-shadow -- 文本阴影 */
	text-shadow: 5px 5px 5px #FF0000;

/* word-wrap -- 自动换行 */
	word-wrap:break-word;

/* No.4: CSS3 字体 */
/* CSS3 字体
 * 使用自己喜欢的任意字体
 * @font-face */
@font-face{
	font-family: myFirstFont; /* 规定字体的名称 */
	src: url('Sansation_Light.ttf'), /* 字体文件的 URL */
		url('Sansation_Light.eot'); /* IE9+ */
	font-stretch: 'normal'; /* 可选.定义如何拉伸字体 */
	font-style: 'normal'; /* 可选.定义字体的样式 */
	font-weight: 'normal'; /* 可选.定义字体的粗细 */
}
div{
	font-family:myFirstFont;
}

/* No.5: CSS3 2D转换 */
/* CSS3 2D转换
 * 对元素进行移动、缩放、转动、拉长或拉伸
 * translate() -- 移动 */
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() -- 元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转 */
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() -- 元素的尺寸会增加或减少 */
div{ /* 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍 */
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() -- 元素翻转给定的角度 */
div{ /* 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度 */
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 转换方法组合在一起 */
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 */
}

/* No.6: CSS3 3D转换 */
/* CSS3 3D转换
 * 使用 3D 转换来对元素进行格式化
 * rotateX() -- 围绕其 X 轴以给定的度数进行旋转 */
div{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg);	/* Safari 和 Chrome */
-moz-transform: rotateX(120deg);	/* Firefox */
}

/* rotateY() -- 围绕其 Y 轴以给定的度数进行旋转 */
div{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg);	/* Safari 和 Chrome */
-moz-transform: rotateY(130deg);	/* Firefox */
}

/* No.7: CSS3 过渡 */
/* CSS3 过渡
 * 当元素从一种样式变换为另一种样式时为元素添加效果
 * */
div{ /* 宽度属性的过渡效果，时长为 2 秒 */
transition: width 2s;
-moz-transition: width 2s;	/* Firefox 4 */
-webkit-transition: width 2s;	/* Safari 和 Chrome */
-o-transition: width 2s;	/* Opera */
}
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;
}

/* No.8: CSS3 动画 */
/* CSS3 动画
 * 创建动画，取代动画图片、Flash 动画以及 JavaScript
 * @keyframes -- 规则 */

/*No.9: CSS3 多列 */
/* CSS3 多列
 * 创建多个列来对文本进行布局 - 就像报纸那样
 * column-count */
div{
-moz-column-count:3; 	/* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
}

/* No.10: CSS3 用户界面 */
/* CSS3 用户界面
 * 重设元素尺寸、盒尺寸以及轮廓等
 * resize -- 调整元素尺寸 */
div{
resize:both;
overflow:auto;
}