html5
一、图形化边界
View Code
顾名思义，图形化边界就是允许使用图片作为对象的边界，语法如下: border: 5px solid #cccccc; -webkit-border-image: url(/images/border-image.png) 5 repeat; -moz-border-image: url(/images/border-image.png) 5 repeat; border-image: url(/images/border-image.png) 5 repeat; 这里，border: 5px 设定了边界的宽度，然后，每个边界的图片定义告诉浏览器，使用图片的多大一部分来充当边界。边界图片还可以针对每一条边单独设置： border-bottom-rightright-image border-bottom-image border-bottom-left-image border-left-image border-top-left-image border-top-image border-top-rightright-image border-right-image 支持的浏览器： Firefox 3.1, Safari , Chrome.
二、圆角效果
View Code
CSS 3 HTML 5 是未来的 Web，它们都还没有正式到来，虽然不少浏览器已经开始对它们提供部分支持。本文介绍了 5 个 CSS3 技巧，可以帮你实现未来的Web。目前这些技术不应该用在正式的客户项目，它们更适合你的个人博客站点，Web 设计社区，或者不会有客户向你投诉的场合。 CSS3 新功能中最常用的一项是圆角效果，标准 HTML 方块对象是90度方角的，CSS3 可以帮你实现圆角。 -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; 甚至单个角也可以实现圆角，不过 Mozilla 和 Webkit 的语法稍有不同。 -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-top-rightright-radius: 20px; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-rightright-radius: 10px; 所支持的浏览器：Firefox, Safari , Chrome
三、用CSS实现(块阴影与文字阴影)的实例
View Code
阴影效果曾让 Web 设计师既爱又恨，现在，有了 CSS3，你不再需要 Photoshop，已经有网站在使用这个功能了，如 24 Ways website. -webkit-box-shadow: 10px 10px 25px #ccc; -moz-box-shadow: 10px 10px 25px #ccc; box-shadow: 10px 10px 25px #ccc; 前两个属性设置阴影的 X / Y 位移，这里分别是 10px，第3个属性定义阴影的虚化程度，最后一个设置阴影的颜色。文字阴影也可以这样设置： text-shadow: 2px 2px 5px #ccc; 支持的浏览器：Firefox 3.1, Safari, Chrome (只支持 Box 阴影) ，Opera (只支持文字阴影).前3个数字表示红绿蓝三色的值，最后一个值代表透明度，另外，我们还可以使用 opacity 实现透明度(目前的灯箱效果多使用该技巧 - 译者)
四、在CSS3中使用 RGBA 实现透明效果的实例
View Code
在CSS中使用 RGBA 实现透明效果的实例 目前，Web 设计中的透明效果主要靠 PNG 图片实现(但在 IE 浏览器支持得并不好 - 译者)，在 CSS3，可以直接实现透明效果。 rgba(200, 54, 54, 0.5); background: rgba(200, 54, 54, 0.5); color: rgba(200, 54, 54, 0.5); color: #000; opacity: 0.5;
五、在CSS中使用@Font-Face 实现定制字体
View Code
Web 设计中有几种字体是比较安全的，如 Arial,Helvetica, Verdana, Georgia, Comic Sans (中文的，一般来说宋体是唯一安全的 - 译者)，现在，使用 CSS3 的 @font-face 可以自己指定字体，不过因为牵扯到版权问题，实际能用的字体也是有限的 (另外，体积庞大的中文字体也是一个不好解决的问题 - 译者)。 语法如下: @font-face { font-family:’Anivers’; src: url(’/images/Anivers.otf’) Format(’opentype’); } 支持的浏览器： Firefox 3.1, Safari, Opera 10 and IE7 (需要一番周折，如果你不怕麻烦，可以在 IE 实现这个功能，请参考： make font-face work in IE ) 虽然 CSS3 尚在开发中，上面提到的这些功能已经可以在部分浏览器中使用了，尤其是 Safari。不幸的是，Safari 并非主流浏览器。 Firefox 目前拥有大量用户基础，另外，即将推出的 Firefox 3.1 支持不少 CSS3 效果，因为 Firefox 用户的升级积极性很高，因此，会有不少用户可以提前体验 CSS3 的新功能。 Google Chrome 今年刚刚发布，它基于 Webkit 引擎，因此和 Safari 很相似，因为 Safari 主要用于 Mac 市场，Chrome 可以正好弥补 Windows 市场的空缺。 根据统计数据，2008年11月止，44.2% 的用户使用 Firefox, 3.1% 使用 Chrome, 2.7% 使用 Safari，意味着 CSS3 的部分功能已经可以支持近半 Internet 用户，而在 Web 设计圈子，这个比例可能更高，大约有 73.6% (Blog.SpoonGraphics 提供的数据) 6. 负面因素 上面讲述的这些 CSS3 功能会给你的网站带来出色的效果，但仍有一些负面的因素必须考虑： Internet Explorer: 46% 的 Internet 无法看到这些效果，因此不要将这些东西用于重要的设计。同时保证，在这些效果不起作用的地方，有替代设计可用。 CSS 验证问题: 这些 CSS3 功能并非最终版本，目前不同的浏览器使用不同标签实现这些功能，可能为你的 Style Sheet 带来验证上的问题。 臃肿代码: 因为不同浏览器要使用不同定义语法，最终将导致你的 CSS 代码十分臃肿。 不当的使用: 对这些效果的不当使用，可能带来一些不良后果，阴影效果尤其如此。
六、让IE6/IE7/IE8支持CSS3属性的脚本ie-css3.htc
View Code
IE6/7并不支持CSS3的属性，IE8也不能很好的支持CSS3。如何让IE 6/7/8支持border-radius (rounded)，box-shadow ( shadow)，text-shadow等这些属性呢？这里介绍一个通过htc脚本实现这些属性的方法。 首先下载ie-css3.htc脚本，然后在css中加入： behavior: url(ie-css3.htc);例如： CSS Code复制内容到剪贴板 01..box { 02. -moz-border-radius: 15px; /* Firefox */ 03. -webkit-border-radius: 15px; /* Safari and Chrome */ 04. border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */ 05. -moz-box-shadow: 10px 10px 20px #000; /* Firefox */ 06. -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */ 07. box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */ 08. behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */ 09.} 注意：behavior: url(ie-css3.htc) 中的ie-css3.htc地址用绝对路径或者直接传到网站的根目录下面，要不然可能会看不到效果
七、用CSS控制图片水平/垂直翻转的实现
View Code
随着现代浏览器对CSS3的支持愈发完善，对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能。相关的CSS代码如下： /*水平翻转*/ .flipx { -moz-transForm:scaleX(-1); -webkit-transform:scaleX(-1); -o-transform:scaleX(-1); transform:scaleX(-1); /*IE*/ filter:FlipH; } /*垂直翻转*/ .flipy { -moz-transform:scaleY(-1); -webkit-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); /*IE*/ filter:FlipV; } 其中，就目前而言，对于基于webkit核心的浏览器，如Chrome以及Safari，实现元素的垂直翻转或是水平翻转也可以使用如下样式： /*水平翻转*/ .flipx { transform: rotateY(180deg); } /*垂直翻转*/ .flipy { transform: rotateX(180deg); } 注意： 1.水平翻转或垂直翻转不同于旋转180度。前者以轴为镜像，后者以点为镜像。 2.如果是对称元素，旋转180度和翻转的显示效果基本上就是一致的，但是，非对称元素就会看到明显差异。 3.对于后面提到的目前仅webkit核心浏览器支持的rotateY(180deg)，这里有个大写的Y。我们都知道Y表示纵轴，所以我们可能会误以为这里实现的是垂直翻转，其实非也，这里的Y表示元素以纵轴为镜像翻转，也就是水平翻转了。 由于这种水平或是垂直翻转性质的东西基本上类似于镜像拷贝，于是，我们在web制作的时候，一旦遇到对称出现的元素的时候，我们只需要处理一个元素就可以了，然后另外一个直接翻转使用下。例如淘宝首页的这个左右指向的按钮：
八、用CSS把层做成半透明
View Code
怎样用CSS把层做成半透明？ 用下面的样式表定义你的层 .alpha { filter: Alpha(Opacity=50, FinishOpacity=50, Style=0, StartX=0, StartY=0, FinishX=100, FinishY=100｝ 解释： Opacity=开始的不透明度(100的话就不透明了) FinishOpacity=结束的不透明度(100的话就不透明了) Style=样式，从0开始，1.2.3....有均匀透明啊，放射形状透明啊... StartX=开始透明的X坐标，基本上为图片、层的左上角（0） StartY= 开始透明的Y坐标，基本上也为图片、层的左上角（0） FinishX=结束透明的X坐标，基本上也图片、层的右下（图片、层的宽度） FinishY=结束透明的Y坐标，基本上也为图片、层的右下角（图片、层的高度）
九、CSS3（transform）实例之3D变换 平移 缩放 扭曲
View Code
首先要了解 transForm 属性相关知识， 点击查看在线手册 先看下效果图: Demo演示地址 浏览器：谷歌Chrome和Safari 4 +。 在这里给大家介绍下transform的属性以及如何取值： none： 无转换 matr… 首先要了解transform属性相关知识，点击查看在线手册 先看下效果图: Demo演示地址 浏览器：谷歌Chrome和Safari 4 +。 在这里给大家介绍下transform的属性以及如何取值： none： 无转换 matrix(<number>,<number>,<number>,<number>,<number>,<number>)： 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵 translate(<length>[, <length>])： 指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0 translateX(<length>)： 指定对象X轴（水平方向）的平移 translateY(<length>)： 指定对象Y轴（垂直方向）的平移 rotate(<angle>)： 指定对象的2D rotation（2D旋转），需先有transform-origin属性的定义 scale(<number>[, <number>])： 指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值 scaleX(<number>)： 指定对象X轴的（水平方向）缩放 scaleY(<number>)： 指定对象Y轴的（垂直方向）缩放 skew(<angle> [, <angle>])： 指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0 skewX(<angle>)： 指定对象X轴的（水平方向）扭曲 skewY(<angle>)： 指定对象Y轴的（垂直方向）扭曲
十、css3动画实例之transition
View Code
XML/HTML Code 复制内容到剪贴板 !DOCTYPEhtml html lang = zh-cn head meta charset = utf-8 / title CSS3动画 / title meta name = author content = / meta name = copyright content = / style body{font-family:微软雅黑;font-size:12px;}… XML/HTML Code复制内容到剪贴板 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>CSS3动画</title> <meta name="author" content="" /> <meta name="copyright" content="" /> <style> body{ font-family:"微软雅黑"; font-size:12px;} h1{font-size:16px;} .test{overflow:hidden;width:100%;margin:0;padding:0;list-style:none;} .test li{float:left;width:200px;height:30px;margin:5px 5px; line-height:30px; border:1px solid #ddd;background-color:#eee;text-align:center;-moz-transition:width .2s ease-in;-webkit-transition:width .2s ease-in;-o-transition:width .2s ease-in;transition:width .2s ease-in;} .test li:nth-child(1):hover{width:250px;} .test li:nth-child(2):hover{width:300px;} .test li:nth-child(3):hover{width:350px;} .test li:nth-child(4):hover{width:400px;} .test li:nth-child(5):hover{width:450px;} button {cursor:pointer;outline:none;blr:expression(this.hideFocus=true);border-style: solid;border-width: 1px 1px 1px 0;border-color: #e2e2e2;height: 26px;line-height: 26px; float:left} input {vertical-align:middle;border-style: solid;border-width: 1px;border-color: #BCBCBC #E7E7E7 #E7E7E7 #BCBCBC;height: 24px;line-height: 24px;padding: 0 3px; float: left;} .Forma{ margin:5px 5px;} .forma input{ width:125px;-moz-transition:width .2s ease-in;-webkit-transition:width .2s ease-in;-o-transition:width .2s ease-in;transition:width .2s ease-in;} .forma input:hover{ width:250px;} .forma button{ width:60px;-moz-transition:.2s;-webkit-transition:.2s;-o-transition:.2s;transition:.2s; background-color:#ffffff;} .forma button:hover{ background-color:#ececec} </style> </head> <body> <h1>请将鼠标移动到下面的矩形上：</h1> <ul class="test"> <li>宽度过渡</li> <li>宽度过渡</li> <li>宽度过渡</li> <li>宽度过渡</li> <li>宽度过渡</li> </ul> <form class="forma"> <input type="text"/> <button>搜索</button> </form> </body> </html> DEMO演示地址 下载实例 这里涉及的重要属性是transition. 辅助属性nth-child:这节不予以详细解释，大家只要他是可以灵活定义父元素下子元素的样式即可，下节课再来进行详细解释。 transition中文解释：过渡 转变。 transition的语法（缩写）：transition:border-color .5s ease-in .1s; border-color：设置对象中的参与过渡的属性，比如：width height 等用来定义某些属性的参数 .5s：设置对象过渡的持续时间 ease-in：设置对象中过渡的动画类型 .1s：设置对象延迟过渡的时间 拆分写法： transition-property:border-color; transition-duration:.5s,; transition-timing-function:ease-in,; transition-delay:.1s,; 控制多个属性过渡： 缩写transition:border-color .5s ease-in .1s,width .1s ease-in .4s; 拆分 transition-property:border-color,width; transition-duration:.5s,.01s; transition-timing-function:ease-in,; transition-delay:.1s,.04s; 扩展：这种属性适合应用于图片与文字间的翻转效果。希望大家试着做些
