css3教程

CSS3规范语言1、创建圆角矩形属性border-radius。2、向 div 元素添加方框阴影：box-shadow: 10px 15px 5px #888888;（10px代表阴影往左交错10像素，15px代表阴影往下15像素，5px代表阴影羽化5像素 #888888是阴影颜色）、3、使用图片创建围绕 div 元素的边框border-image:url(border.png) 30 30 round;（平铺）border-image:url(border.png) 30 30 stretch;（拉伸）4、CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。background:url(img.jpg);background-size:50px 100px;（调整背景图片的大小）background-repeat:no-repeat;background-size:40% 100%;（对背景图片进行拉伸）5、background-origin 属性规定背景图片的定位区域。Divbackground:url(img.jpg);background-origin:content-box;(背景图片定位于content-box层)6、CSS3 允许您为元素使用多个背景图像。background-image:url(bg_flower.gif),url(bg_flower_2.gif);7、在 CSS3 中，text-shadow 可向文本应用阴影。text-shadow: 5px 5px 5px #FF0000;( 水平阴影、垂直阴影、模糊距离，以及阴影的颜色)8、文字超出区域自动换行word-wrap:break-word;9、在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。通过 CSS3，web 设计师可以使用他们喜欢的任意字体。当您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。您“自己的”的字体是在 CSS3 font-face 规则中定义的。在新的 font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：font-facefont-family: myFirstFont;src: url(Sansation_Light.ttf), url(Sansation_Light.eot); /* IE9+ */使用粗体字体您必须为粗体文本添加另一个包含描述符的 font-face：font-facefont-family: myFirstFont;src: url(Sansation_Bold.ttf), url(Sansation_Bold.eot); /* IE9+ */font-weight:bold;10、CSS3 2D 转换1) 通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。divtransform: 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 */2) 通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：divtransform: 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 */3) 通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。divtransform: 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 */4) 通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：divtransform: 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 */值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。5) 通过 skew() 方法，元素转动给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：divtransform: 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 */6) matrix() 方法把所有 2D 转换方法组合在一起。matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。divtransform: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 */11、CSS3 允许您使用 3D 转换来对元素进行格式化1) 通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。divtransform: rotateX(120deg);-webkit-transform: rotateX(120deg);/* Safari 和 Chrome */-moz-transform: rotateX(120deg);/* Firefox */2) 通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。divtransform: rotateY(130deg);-webkit-transform: rotateY(130deg);/* Safari 和 Chrome */-moz-transform: rotateY(130deg);/* Firefox */12、CSS3 过渡通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。divwidth:100px;transition: width 2s; （应用于宽度属性的过渡效果，时长为 2 秒）-moz-transition: width 2s;/* Firefox 4 */-webkit-transition: width 2s;/* Safari 和 Chrome */-o-transition: width 2s;/* Opera */当鼠标指针悬浮于 元素上时div:hoverwidth:300px;当指针移出元素时，它会逐渐变回原来的样式。divwidth:100px;height:100px;background:yellow;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 */div:hoverwidth:200px;height:200px;transform:rotate(180deg);-moz-transform:rotate(180deg); /* Firefox 4 */-webkit-transform:rotate(180deg); /* Safari and Chrome */-o-transform:rotate(180deg); /* Opera */13、CSS3 动画通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。如需在 CSS3 中创建动画，您需要学习 keyframes 规则。keyframes 规则用于创建动画。在 keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。keyframes myfirstfrom background: red;to background: yellow;-moz-keyframes myfirst /* Firefox */from background: red;to background: yellow;-webkit-keyframes myfirst /* Safari 和 Chrome */from background: red;to background: yellow;-o-keyframes myfirst /* Opera */from background: red;to background: yellow;当在 keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器： 规定动画的名称 规定动画的时长把 myfirst 动画捆绑到 div 元素，时长：5 秒：divanimation: myfirst 5s;-moz-animation: myfirst 5s;/* Firefox */-webkit-animation: myfirst 5s;/* Safari 和 Chrome */-o-animation: myfirst 5s;/* Opera */当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：keyframes myfirst0% background: red;25% background: yellow;50% background: blue;100% background: green;-moz-keyframes myfirst /* Firefox */0% background: red;25% background: yellow;50% background: blue;100% background: green;-webkit-keyframes myfirst /* Safari 和 Chrome */0% background: red;25% background: yellow;50% background: blue;100% background: green;-o-keyframes myfirst /* Opera */0% background: red;25% background: yellow;50% background: blue;100% background: green;改变背景色和位置：keyframes myfirst0% 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 和 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;贪食蛇效果divanimation-name: myfirst;animation-duration: 5s;animation-timing-function: linear;animation-delay: 2s;animation-iteration-count: infinite;animation-direction: alternate;animation-play-state: running;/* Firefox: */-moz-animation-name: myfirst;-moz-animation-duration: 5s;-moz-animation-timing-function: linear;-moz-animation-delay: 2s;-moz-animation-iteration-count: infinite;-moz-animation-direction: alternate;-moz-animation-play-state: running;/* Safari 和 Chrome: */-webkit-animation-name: myfirst;-webkit-animation-duration: 5s;-webkit-animation-timing-function: linear;-webkit-animation-delay: 2s;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: alternate;-webkit-animation-play-state: running;/* Opera: */-o-animation-name: myfirst;-o-animation-duration: 5s;-o-animation-timing-function: linear;-o-animation-delay: 2s;-o-animation-iteration-count: infinite;-o-animation-direction: alternate;-o-animation-play-state: running;简写：divanimation: 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: myfir