最近详细地研究了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; |