最近详细地研究了CSS3的相关内容，并整理了这个文档，方便以后查询使用，分享给大家。
案例代码大家可以下载参考下：https://gitee.com/LIULIULIU8/CSS3
1、边框属性border-radius、box-shadow、border-image
|
边框圆角 |
border-radius:25px; -moz-border-radius:25px; /* 老的 Firefox */ |
|
边框阴影 |
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */ box-shadow: 10px 10px 5px #888888; |
|
边框图片 （round 图片铺满整个边框） |
-moz-border-image:url(images/border.png) 30 30 round; /* Old Firefox */ -webkit-border-image:url(images/border.png) 30 30 round; /* Safari and Chrome */ -o-border-image:url(images/border.png) 30 30 round; /* Opera */ border-image:url(images/border.png) 30 30 round; |
|
边框图片 （stretch 图片被拉伸以填充该土区域） |
-moz-border-image:url(images/border.png) 30 30 stretch; /* Old Firefox */ -webkit-border-image:url(images/border.png) 30 30 stretch; /* Safari and Chrome */ -o-border-image:url(images/border.png) 30 30 stretch; /* Opera */ border-image:url(images/border.png) 30 30 stretch; |
2、背景属性：background-size、background-origin
|
背景图片大小 |
-moz-background-size:63px 100px; /* 老版本的 Firefox */ background-size:63px 100px; |
|
背景图片的定位区域 (content-box、padding-box或 border-box 区域) |
-webkit-background-origin:content-box; /* Safari */ background-origin:content-box; |
|
多个背景图像 |
background-image:url(images/bg_flower.gif),url(images/bg_flower_2.gif); background-size:60px auto; |
|
背景的绘制区域 |
background-clip:content-box; |
3、文本属性text-shadow、word-wrap
|
文本阴影 (水平阴影、垂直阴影、模糊距离，阴影颜色) |
text-shadow: 1px 1px 2px #FF0000; |
|
单词强制分割并换行到下一行 |
word-wrap:break-word; |
|
文本的换行 （折行）规则。normal|none|unrestricted|suppress; |
目前主流浏览器都不支持 text-wrap 属性 text-wrap:none; |
4、文本字体@font-face
|
@font-face |
@font-face {font-family: Sansation_Bold; src: url('font/MStiffHei HKS UltraBold.ttf') ,url('http://www.w3school.com.cn/tiy/example/css3/Sansation_Bold.eot'); /* IE9+ */ font-weight:bold;} .Sansation_Bold{ font-family:Sansation_Bold;} |
5、2D 转换:transform,对元素进行移动、缩放、转动、拉长或拉伸
|
移动（translate） |
元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数 @transform:translate(30px,30px); -ms-transform:translate(30px,30px); /* IE 9 */ -moz-transform:translate(30px,30px); /* Firefox */ -webkit-transform:translate(30px,30px); /* Safari and Chrome */ -o-transform:translate(30px,30px); /* Opera */ |
|
旋转(rotate) |
rotate（）元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转 transform:rotate(30deg); -ms-transform:rotate(30deg); /* IE 9 */ -moz-transform:rotate(30deg); /* Firefox */ -webkit-transform:rotate(30deg); /* Safari and Chrome */ -o-transform:rotate(30deg); /* Opera */ |
|
缩放(scale) |
scale() 方法，元素的尺寸会倍数增加或减少，根据给定宽度（X 轴）和高度（Y 轴）参数 transform:scale(2,4); -ms-transform:scale(2,4); /* IE 9 */ -moz-transform:scale(2,4); /* Firefox */ -webkit-transform:scale(2,4); /* Safari and Chrome */ -o-transform:scale(2,4); /* Opera */ |
|
翻转(skew) |
skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数 transform:skew(30deg,20deg); -ms-transform:skew(30deg,20deg); /* IE 9 */ -moz-transform:skew(30deg,20deg); /* Firefox */ -webkit-transform:skew(30deg,20deg); /* Safari and Chrome */ -o-transform:skew(30deg,20deg); /* Opera */ |
|
组合(matrix) |
matrix() 方法把所有 2D 转换方法组合在一起。需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。 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 */ |
6、3D 转换:transform来对元素进行格式化
|
绕X旋转 （rotateX） |
rotateX，元素围绕其 X 轴以给定的度数进行旋转 transform:rotateX(40deg); -webkit-transform:rotateX(40deg); /* Safari and Chrome */ -moz-transform:rotateX(40deg); /* Firefox */ |
|
绕Y旋转 （rotateY） |
rotateY，元素围绕其 Y 轴以给定的度数进行旋转 transform:rotateY(60deg); -webkit-transform:rotateY(60deg); /* Safari and Chrome */ -moz-transform:rotateY(60deg); /* Firefox */ |
7、过渡：transition,是元素从一种样式逐渐改变为另一种的效果
|
单个样式 |
transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ |
|
|
多个样式 |
transition:width 2s, height 2s; -moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */ -webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */ -o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */ |
|
|
过渡属性： transition 简写属性，用于在一个属性中设置四个过渡属性。 transition-property 规定应用过渡的 CSS 属性的名称。none没有属性会获得过渡效果、all 所有属性都将获得过渡效果。、property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。 transition-duration 定义过渡效果花费的时间。默认是 0。 transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 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 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 transition-delay 规定过渡效果何时开始。默认是 0。 |
||
|
过渡实例 |
transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s; /* Firefox 4 */ -moz-transition-property:width; -moz-transition-duration:1s; -moz-transition-timing-function:linear; -moz-transition-delay:2s; /* Safari 和 Chrome */ -webkit-transition-property:width; -webkit-transition-duration:1s; -webkit-transition-timing-function:linear; -webkit-transition-delay:2s; /* Opera */ -o-transition-property:width; -o-transition-duration:1s; -o-transition-timing-function:linear; -o-transition-delay:2s; |
|
|
过滤实例（简写） |
/*简写效果*/ 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; |
|
8、动画：我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript
/*CSS animations, transforms 以及 transitions 不会自动开启GPU加速：我们可以使用个小技巧“欺骗”浏览器来开启硬件加速。
虽然我们可能不想对元素应用3D变换，可我们一样可以开启3D引擎。例如我们可以用transform: translateZ(0); 来开启硬件加速 。*/
/*@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果*/
|
@keyframes |
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100% @keyframes myfirst { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } @-moz-keyframes myfirst /* Firefox */ { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } @-webkit-keyframes myfirst /* Safari and Chrome */ { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } @-o-keyframes myfirst /* Opera */ { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } |
|
简单用法 |
animation:myfirst 5s; -moz-animation:myfirst 5s; /* Firefox */ -webkit-animation:myfirst 5s; /* Safari and Chrome */ -o-animation:myfirst 5s; /* Opera */ |
|
下面的表格列出了 @keyframes 规则和所有动画属性： @keyframes 规定动画。 animation 所有动画属性的简写属性，除了 animation-play-state 属性。 语法：animation: name duration timing-function delay iteration-count direction; animation-name 规定 @keyframes 动画的名称。 animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 animation-timing-function 规定动画的速度曲线。默认是 "ease" 值：linear/ease/ease-in/ease-out/ease-in-out/cubin-bezier(n,n,n,n) animation-delay 规定动画何时开始。默认是 0。 animation-iteration-count 规定动画被播放的次数。默认是 1。infinite表示一直循环 animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 normal 默认值。动画应该正常播放。 alternate 动画应该轮流反向播放。 animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 animation-fill-mode 规定对象动画时间之外的状态。 |
|
|
组合使用（简写） |
animation: myfirst 5s linear 2s infinite alternate; /* Firefox: */ -moz-animation: myfirst 5s linear 2s infinite alternate; /* Safari 和 Chrome: */ -webkit-animation: myfirst 5s linear 2s infinite alternate; /* Opera: */ -o-animation: myfirst 5s linear 2s infinite alternate; |
9、多列——column-count/column-gap/column-rule等（更多属性），您能够创建多个列来对文本进行布局 - 就像报纸那样！
|
多列 |
/*column-count 属性规定元素应该被分隔的列数：*/ -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; /*column-gap 属性规定列之间的间隔：*/ -moz-column-gap:30px; /* Firefox */ -webkit-column-gap:30px; /* Safari and Chrome */ column-gap:30px; /*column-rule 属性设置列之间的宽度、样式和颜色规则。*/ -moz-column-rule:4px outset #ff0000; /* Firefox */ -webkit-column-rule:4px outset #ff0000; /* Safari and Chrome */ column-rule:4px outset #ff0000; |
10、用户界面-resize、box-sizing、outline-offset等更多属性，新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。
|
resize |
/*resize 属性规定是否可由用户调整元素尺寸。*/ border:2px solid; padding:10px 40px; width:300px; resize:both; overflow:auto; |
|
box-sizing |
/*box-sizing : content-box|border-box|inherit;属性允许您以确切的方式定义适应某个区域的具体内容。*/ box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ width:50%; float:left; |
|
outline-offset |
/*outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。*/ margin:20px; width:150px; padding:10px; height:70px; border:2px solid black; outline:2px solid red; outline-offset:15px; |