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;
}