CSS3第三章CSS3强大的特效幻灯片.pptVIP

CSS3 3D转换 rotateY() 元素围绕其 Y 轴以给定的度数进行旋转 div{ transform: rotateY(130deg); -webkit-transform: rotateY(130deg); /* Safari 和 Chrome */ -moz-transform: rotateY(130deg); /* Firefox */ } 总结 * 第三章 CSS3 强大的特效 目标 掌握CSS3各种效果实现 No PhotoShop！ CSS3 强大的特效 边框 border 背景 background 文本效果 text 2D/3D转换 CSS3 边框 box-shadow 阴影 border-radius 圆角 border-image 图片 border-color 颜色 CSS3 边框阴影 box-shadow box-shadow 阴影 语法 box-shadow： length 阴影水平偏移值（可取正负值） length 阴影垂直偏移值（可取正负值） length 阴影模糊值 length 阴影延长值 color 阴影颜色 -webkit-box-shadow:5px 2px 6px #000; -moz-box-shadow:5px 2px 6px #000; padding:4px 10px; CSS3 边框阴影 box-shadow Box-shadow的浏览器兼容 CSS3 边框圆角 box-radius box-radius 圆角 语法 border-radius ： none | length length length length border-width: 1px; border-style: solid; -moz-border-radius: 11px; -khtml-border-radius: 11px; -webkit-border-radius: 11px; border-radius: 11px; padding:5px; 注意： 1. length由浮点数字和单位标识符组成的长度值。不可为负值。 2. 值为0，则渲染为直角 CSS3 边框圆角 box-radius box-radius 的浏览器兼容 CSS3 边框图片 border-image box-image 图片 语法 border-image ： none | image [ number | percentage]{1,4} [ / border-width{1,4} ]? [ stretch | repeat | round ]{0,2} 四个参数带表方位 需设置边框的宽度 -webkit-border-image: url(img/bt_blue.png) 0 12 0 12 stretch ; -moz-border-image: url(img/bt_blue.png) 0 12 0 12 stretch; [ stretch | repeat | round ]： 拉伸 | 重复 | 平铺 (其中stretch是默认值。) CSS3 边框图片 border-image border-image 的浏览器兼容 CSS3 背景 background-origin 定位 background-clip 绘制 background-size 大小 Multiple backgrounds 多重背景 background linear gradient 背景线性渐变 CSS3背景定位 background-origin background-origin　定位 语法 background-origin ： border-box 从border区域开始显示背景。 padding-box 从padding区域开始显示背景。 content-box 从content区域开始显示背景。 CSS3 背景绘制 background-clip background-clip　背景的绘制区域 语法 background-clip ： border-box： 从border区域向外裁剪背景。 padding-box： 从padding区域向外裁剪背景。 content-box： 从content区域向外裁剪背景。 no-clip： 从border区域向外裁剪背景。 CSS3背景大小 background-size background-size　大小 语法 background-size ：[ length | percentage | auto ]{1,2} | cover | contain length： 由浮点数