css3 基础
- background-size 背景属性
- 以像素或者百分比来规定背景图片的尺寸
div { background:url(bg_flower.gif); -moz-background-size:63px 100px; /* 老版本的 Firefox */ background-size:63px 100px; //宽为63px 高为100px background-repeat:no-repeat; }对背景图片进行拉升，填充背景区域
div { background:url(bg_flower.gif); -moz-background-size:40% 100%; /* 老版本的 Firefox */ background-size:40% 100%; background-repeat:no-repeat; }background-origin:content-box,padding-box,border-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 规定背景的绘制区域，cotent-box,padding-box,border-boxs
- text-shadow 设置文本阴影，参数分别为：水平阴影，垂直阴影，模糊距离，阴影颜色
h1 { text-shadow: 5px 5px 5px #FF0000; }word-wrap:属性运行长单词换到下一行，参数有normal、break-word
<!DOCTYPE html> <html> <head> <style> p.test { width:11em; border:1px solid #000000; word-wrap:break-word; } </style> </head> <body> <p class="test">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p> </body> </html>@font-face 首先定义字体的名称（myFirstFont） 然后指向该字体文件，改属性可以把文件字体放到服务器直接引用就行
<!DOCTYPE html> <html> <head> <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> </head> <body> <div> With CSS3, websites can <b>finally</b> use fonts other than the pre-selected "web-safe" fonts. </div> <p><b>注释：</b>Internet Explorer 9+ 支持新的 @font-face 规则。Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。</p> </body> </html>transform 使用2d 或者 3d 转换来转换参数。属性包括：translate(),rotate(),scale(),skew(),matrix()，所有参数都可以带上X,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(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(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(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() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
<!DOCTYPE html> <html> <head> <style> div { width:100px; height:75px; background-color:yellow; border:1px solid black; } div#div2 { 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 */ } </style> </head> <body> <div>你好。这是一个 div 元素。</div> <div id="div2">你好。这是一个 div 元素。</div> </body> </html>transform-origin 属性允许您改变被转换元素的位置。
div { transform: rotate(45deg); transform-origin:20% 40%; -ms-transform: rotate(45deg); /* IE 9 */ -ms-transform-origin:20% 40%; /* IE 9 */ -webkit-transform: rotate(45deg); /* Safari 和 Chrome */ -webkit-transform-origin:20% 40%; /* Safari 和 Chrome */ -moz-transform: rotate(45deg); /* Firefox */ -moz-transform-origin:20% 40%; /* Firefox */ -o-transform: rotate(45deg); /* Opera */ -o-transform-origin:20% 40%; /* Opera */ }查看动画效果例子
<html> <head></head> <style> div{ width：100px; height:75px; background-color:yellow; border:1px solid black; } </style> <script> var x,y,n=0,ny=0,rotINT,rotYINT; function rotateDIV(){ x=document.getElementById("rotate1"); clearInterval(rotINT); rotINT=setInterval("startRotate()",10); } function rotateYDIV() { y=document.getElementById("rotatey1") clearInterval(rotYINT) rotYINT=setInterval("startYRotate()",10) } function startRotate(){ n=n+1; x.style.transform="rotate("+n+"deg)"; x.style.webkitTransform="rotate("+n+"deg)"; x.style.OTransform="rotate("+n+"deg)"; x.style.MozTransform="rotate("+n+"deg)"; if(n==180 || n==360){ clearInterval(rotINT); if(n==360){n=0} } } function startYRotate() { ny=ny+1; y.style.transform="rotateY(" + ny + "deg)" y.style.webkitTransform="rotateY(" + ny + "deg)" y.style.OTransform="rotateY(" + ny + "deg)" y.style.MozTransform="rotateY(" + ny + "deg)" if (ny==180 || ny>=360) { clearInterval(rotYINT) if (ny>=360){ny=0} } } </script> <div onclick="rotateDIV()" id="rotate1" class="animated_div" >这是一个演示</div> <div onclick="rotateYDIV()" id="rotatey1" class="animated_div">这是另一个演示</div> </html>应用过渡：
transition:用于在一个属性中设置四个过渡属性
transition-property:用于规定应用过渡的css属性的名称
transition-duration:定义过渡花费的时间
transition-timing-function:规定过渡效果的时间曲线
transition-delay:规定过渡效果何时开始<!DOCTYPE html> <html> <head> <style> .animated_div { width:65px; height:40px; background:#92B901; color:#ffffff; position:absolute; font-weight:bold; font:12px '微软雅黑', Verdana, Arial, Helvetica, sans-serif; padding:20px 10px 0px 10px; float:left; margin:5px; -webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s; -webkit-border-radius:5px; -o-transition-property:width,height,-o-transform,background,font-size,opacity; -o-transition-duration:1s,1s,1s,1s,1s,1s; -moz-transition-property:width,height,-o-transform,background,font-size,opacity; -moz-transition-duration:1s,1s,1s,1s,1s,1s; transition-property:width,height,transform,background,font-size,opacity; transition-duration:1s,1s,1s,1s,1s,1s; border-radius:5px; opacity:0.4; } .animated_div:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); opacity:1; background:#1ec7e6; width:90px; height:60px; font-size:16px; } </style> </head> <body> <div class="animated_div">css3 过渡</div> </body> </html>@keyframes 创建动画时，需要把它绑定到某个选择器，否则是不会产生动画效果的。
1.规定动画的名称
2.规定动画的时长
动画发生的时间是用百分比来展示的，也可以用from和to,等同于0%和100%
animation 属性是一个简写属性，用于设置六个动画属性：
animation-name:需要绑定的选择器的名称
animation-duration:规定完成动画所花费的时间，以秒或者豪计
animation-timing-function:规定动画的速度曲线
linear:速度相同
ease：开始和结束的时候低速，中间较快
ease-in:动画以低速开始
ease-out:动画以低速结束
ease-in-out:动画以低速开始，低速结束<!DOCTYPE html> <html> <head> <style> #animated_div { width:60px; height:40px; background:#92B901; color:#ffffff; position:relative; font-weight:bold; font:bold 12px '微软雅黑',Verdana, Arial, Helvetica, sans-serif; padding:20px 10px 0px 10px; animation:animated_div 5s 2 alternate; -moz-animation:animated_div 5s 2 alternate; -webkit-animation:animated_div 5s 2 alternate; -o-animation:animated_div 5s 2 alternate; border-radius:5px; -webkit-border-radius:5px; } @keyframes animated_div { 0% {transform: rotate(0deg);left:0px;} 25% {transform: rotate(20deg);left:0px;} 50% {transform: rotate(60deg);left:500px;} 55% {transform: rotate(360deg);left:500px;} 70% {transform: rotate(0deg);left:500px;background:#1ec7e6;} 100% {transform: rotate(-360deg);left:0px;} } @-webkit-keyframes animated_div { 0% {-webkit-transform: rotate(0deg);left:0px;} 25% {-webkit-transform: rotate(20deg);left:0px;} 50% {-webkit-transform: rotate(60deg);left:500px;} 55% {-webkit-transform: rotate(360deg);left:500px;} 70% {-webkit-transform: rotate(0deg);left:500px;background:#1ec7e6;} 100% {-webkit-transform: rotate(-360deg);left:0px;} } @-moz-keyframes animated_div { 0% {-moz-transform: rotate(0deg);left:0px;} 25% {-moz-transform: rotate(20deg);left:0px;} 50% {-moz-transform: rotate(60deg);left:500px;} 55% {-moz-transform: rotate(360deg);left:500px;} 70% {-moz-transform: rotate(0deg);left:500px;background:#1ec7e6;} 100% {-moz-transform: rotate(-360deg);left:0px;} } @-o-keyframes animated_div { 0% {transform: rotate(0deg);left:0px;} 25% {transform: rotate(20deg);left:0px;} 50% {transform: rotate(60deg);left:500px;} 55% {transform: rotate(360deg);left:500px;} 70% {transform: rotate(0deg);left:500px;background:#1ec7e6;} 100% {transform: rotate(-360deg);left:0px;} } </style> </head> <body> <div></div> <p id="animated_div">CSS3 动画</p> </body> </html>column-count 属性规定元素应该被分隔的列数
div { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari 和 Chrome */ column-count:3; }column-gap 属性规定列之间的间隔
div { -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari 和 Chrome */ column-gap:40px; }resize 属性规定是否可以由用户来调整元素尺寸 resize：none | both | horizontal | vertical
none 不允许用户调整元素的大小
both:用户可以调节元素的宽度和高度
horizontal:用户可以调节元素的宽度
vertical:用户可以调节元素的高度<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>resize_CSS参考手册_web前端开发参考手册系列</title> <style> .test{overflow:auto;width:200px;height:100px;resize:both;background:#eee;} </style> </head> <body> <div class="test"> <ul> <li>新闻列表</li> <li>新闻列表</li> <li>新闻列表</li> </ul> </div> </body> </html>
