随笔小计 --
1. <meta http-equiv="mobile-agent" content="format=html5; url=http://m.cnmo.com/">
页头meta声明， 当用户用手机访问这个PC端页面时，URL将自动跳转到指定的移动端URL地址。 format设置移动端URL地址网页格式；
2. nofollow 两种用法
1.用于meta元标签：<meta name="robots" content="nofollow" />，告诉爬虫该页面上所有链接都无需追踪。
2.用于a标签：<a href="login.aspx" rel="nofollow">登录</a>,告诉爬虫该页面无需追踪。
3. font-family:"\5FAE\8F6F\96C5\9ED1"
一种unicode编码格式。为了防止在页面中不显示中文的 一种兼容写法； 相当于 \r\nfont-family:\\“微软雅黑” 或者 \r\nfont-family:\\“Microsoft YaHe”
4. -webkit-appearance:none; -moz-appearance:none;
取消iphone 的自带样式;
只在Chrome、FF浏览器下能用；
5. border-collapse:collapse; 合并边框为一个边框
6. border-spacing:0; 单元格间距
7. box-shadow:inset 0 0 1px #FFF;
所表示的含义是没有偏移，1像素模糊的白色内阴影。
box-shadow还支持多阴影，例如：box-shadow: inset 0 0 1px #fff, inset 4px 4px 20px rgba(255,255,255,0.33), inset -2px -2px 10px rgba(255,255,255,0.25);所表示的含义是，无偏移1像素模糊白色阴影重叠于左上角4像素偏移20像素模糊透明度0.33的白色内阴影再重叠于右下角偏移2像素，模糊10像素，透明度0.25的白色内阴影。
8. background-clip:padding-box;
9. -webkit-tap-highlight-color ： rgba(0,0,0,0);
这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。
想要禁用这个高亮，设置颜色的alpha值为0即可。
如：设置高亮色为50%透明的红色:
-webkit-tap-highlight-color: rgba(255,0,0,0.5);
transition-duration: 5s;
-moz-transition-duration: 5s; /* Firefox 4 */
-webkit-transition-duration: 5s; /* Safari 和 Chrome */
-o-transition-duration: 5s; /* Opera */
向搜索引擎表示该页面是html语言，并且语言为英文网站，其"lang"的意思就是“language”，语言的意思，而“en”即表示english
你的页面如果是中文页面，可将其改为
<html lang="zh"> <html lang="zh-cn">
zh即表示中文
这个主要是给搜索引擎看的，搜索引擎不会去判断该站点是中文站还是英文站，所以这句话就是让搜索引擎知道，你的站点是中文站，对html页面本身不会有影响这些现在都是html规范，你的页面越规范，就越容易被收录
16. clearfix:
bootstrap 里面的写法：
.clearfix{
zoom:1;
}
.clear:after,
.clear:before{
display:table;
line-height:0;
content:"";
}
.clear:after{
clear:both;
}
因为display: table会产生一些匿名盒子，这些匿名盒子的其中一个（display值为table-cell）会形成Block Formatting Context。
这样我们新的.clearfix就会闭合内部元素的浮动。
17. IE6下实现border的transparent透明解决方案
border:solid 1px transparent;
- _border-color:tomato; /*For IE6-*/
- _filter:chroma(color=tomato);/*For IE6-*/
原理是先给border定义一个颜色，然后再把这个颜色过滤掉。
(此方法一般不使用)
18. 实现 导航条内ul自动居中。在li数量不固定情况下使用。
代码如下：
<div> <ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li> </ul> </div> li{list-style:none;} div{width:1000px;height:30px;background:#ddd;margin:50px auto; position:relative;} ul{ position:relative; left:50%; float:left; } li{ background:#eee; padding:0 20px; line-height:30px; position:relative; right:50%; float:left; }
19. IE6下 兼容半透明png图片方法
页面头部插入 <!--[if IE 6]> <script type="text/javascript" src="js/DD_belatedPNG.js"></script> <script type="text/javascript">DD_belatedPNG.fix('img')</script> <![endif]--> img表示标签名 JS文件如下： /** * DD_belatedPNG: Adds IE6 support: PNG images for CSS background-image and HTML <IMG/>. * Author: Drew Diller * Email: drew.diller@gmail.com * URL: http://www.dillerdesign.com/experiment/DD_belatedPNG/ * Version: 0.0.8a * Licensed under the MIT License: http://dillerdesign.com/experiment/DD_belatedPNG/#license * * Example usage: * DD_belatedPNG.fix('.png_bg'); // argument is a CSS selector * DD_belatedPNG.fixPng( someNode ); // argument is an HTMLDomElement **/ /* PLEASE READ: Absolutely everything in this script is SILLY. I know this. IE's rendering of certain pixels doesn't make sense, so neither does this code! */ var DD_belatedPNG = { ns: 'DD_belatedPNG', imgSize: {}, delay: 10, nodesFixed: 0, createVmlNameSpace: function () { /* enable VML */ if (document.namespaces && !document.namespaces[this.ns]) { document.namespaces.add(this.ns, 'urn:schemas-microsoft-com:vml'); } }, createVmlStyleSheet: function () { /* style VML, enable behaviors */ /* Just in case lots of other developers have added lots of other stylesheets using document.createStyleSheet and hit the 31-limit mark, let's not use that method! further reading: http://msdn.microsoft.com/en-us/library/ms531194(VS.85).aspx */ var screenStyleSheet, printStyleSheet; screenStyleSheet = document.createElement('style'); screenStyleSheet.setAttribute('media', 'screen'); document.documentElement.firstChild.insertBefore(screenStyleSheet, document.documentElement.firstChild.firstChild); if (screenStyleSheet.styleSheet) { screenStyleSheet = screenStyleSheet.styleSheet; screenStyleSheet.addRule(this.ns + '\\:*', '{behavior:url(#default#VML)}'); screenStyleSheet.addRule(this.ns + '\\:shape', 'position:absolute;'); screenStyleSheet.addRule('img.' + this.ns + '_sizeFinder', 'behavior:none; border:none; position:absolute; z-index:-1; top:-10000px; visibility:hidden;'); /* large negative top value for avoiding vertical scrollbars for large images, suggested by James O'Brien, http://www.thanatopsic.org/hendrik/ */ this.screenStyleSheet = screenStyleSheet; /* Add a print-media stylesheet, for preventing VML artifacts from showing up in print (including preview). */ /* Thanks to R閙i Pr関ost for automating this! */ printStyleSheet = document.createElement('style'); printStyleSheet.setAttribute('media', 'print'); document.documentElement.firstChild.insertBefore(printStyleSheet, document.documentElement.firstChild.firstChild); printStyleSheet = printStyleSheet.styleSheet; printStyleSheet.addRule(this.ns + '\\:*', '{display: none !important;}'); printStyleSheet.addRule('img.' + this.ns + '_sizeFinder', '{display: none !important;}'); } }, readPropertyChange: function () { var el, display, v; el = event.srcElement; if (!el.vmlInitiated) { return; } if (event.propertyName.search('background') != -1 || event.propertyName.search('border') != -1) { DD_belatedPNG.applyVML(el); } if (event.propertyName == 'style.display') { display = (el.currentStyle.display == 'none') ? 'none' : 'block'; for (v in el.vml) { if (el.vml.hasOwnProperty(v)) { el.vml[v].shape.style.display = display; } } } if (event.propertyName.search('filter') != -1) { DD_belatedPNG.vmlOpacity(el); } }, vmlOpacity: function (el) { if (el.currentStyle.filter.search('lpha') != -1) { var trans = el.currentStyle.filter; trans = parseInt(trans.substring(trans.lastIndexOf('=')+1, trans.lastIndexOf(')')), 10)/100; el.vml.color.shape.style.filter = el.currentStyle.filter; /* complete guesswork */ el.vml.image.fill.opacity = trans; /* complete guesswork */ } }, handlePseudoHover: function (el) { setTimeout(function () { /* wouldn't work as intended without setTimeout */ DD_belatedPNG.applyVML(el); }, 1); }, /** * This is the method to use in a document. * @param {String} selector - REQUIRED - a CSS selector, such as '#doc .container' **/ fix: function (selector) { if (this.screenStyleSheet) { var selectors, i; selectors = selector.split(','); /* multiple selectors supported, no need for multiple calls to this anymore */ for (i=0; i<selectors.length; i++) { this.screenStyleSheet.addRule(selectors[i], 'behavior:expression(DD_belatedPNG.fixPng(this))'); /* seems to execute the function without adding it to the stylesheet - interesting... */ } } }, applyVML: function (el) { el.runtimeStyle.cssText = ''; this.vmlFill(el); this.vmlOffsets(el); this.vmlOpacity(el); if (el.isImg) { this.copyImageBorders(el); } }, attachHandlers: function (el) { var self, handlers, handler, moreForAs, a, h; self = this; handlers = {resize: 'vmlOffsets', move: 'vmlOffsets'}; if (el.nodeName == 'A') { moreForAs = {mouseleave: 'handlePseudoHover', mouseenter: 'handlePseudoHover', focus: 'handlePseudoHover', blur: 'handlePseudoHover'}; for (a in moreForAs) { if (moreForAs.hasOwnProperty(a)) { handlers[a] = moreForAs[a]; } } } for (h in handlers) { if (handlers.hasOwnProperty(h)) { handler = function () { self[handlers[h]](el); }; el.attachEvent('on' + h, handler); } } el.attachEvent('onpropertychange', this.readPropertyChange); }, giveLayout: function (el) { el.style.zoom = 1; if (el.currentStyle.position == 'static') { el.style.position = 'relative'; } }, copyImageBorders: function (el) { var styles, s; styles = {'borderStyle':true, 'borderWidth':true, 'borderColor':true}; for (s in styles) { if (styles.hasOwnProperty(s)) { el.vml.color.shape.style[s] = el.currentStyle[s]; } } }, vmlFill: function (el) { if (!el.currentStyle) { return; } else { var elStyle, noImg, lib, v, img, imgLoaded; elStyle = el.currentStyle; } for (v in el.vml) { if (el.vml.hasOwnProperty(v)) { el.vml[v].shape.style.zIndex = elStyle.zIndex; } } el.runtimeStyle.backgroundColor = ''; el.runtimeStyle.backgroundImage = ''; noImg = true; if (elStyle.backgroundImage != 'none' || el.isImg) { if (!el.isImg) { el.vmlBg = elStyle.backgroundImage; el.vmlBg = el.vmlBg.substr(5, el.vmlBg.lastIndexOf('")')-5); } else { el.vmlBg = el.src; } lib = this; if (!lib.imgSize[el.vmlBg]) { /* determine size of loaded image */ img = document.createElement('img'); lib.imgSize[el.vmlBg] = img; img.className = lib.ns + '_sizeFinder'; img.runtimeStyle.cssText = 'behavior:none; position:absolute; left:-10000px; top:-10000px; border:none; margin:0; padding:0;'; /* make sure to set behavior to none to prevent accidental matching of the helper elements! */ imgLoaded = function () { this.width = this.offsetWidth; /* weird cache-busting requirement! */ this.height = this.offsetHeight; lib.vmlOffsets(el); }; img.attachEvent('onload', imgLoaded); img.src = el.vmlBg; img.removeAttribute('width'); img.removeAttribute('height'); document.body.insertBefore(img, document.body.firstChild); } el.vml.image.fill.src = el.vmlBg; noImg = false; } el.vml.image.fill.on = !noImg; el.vml.image.fill.color = 'none'; el.vml.color.shape.style.backgroundColor = elStyle.backgroundColor; el.runtimeStyle.backgroundImage = 'none'; el.runtimeStyle.backgroundColor = 'transparent'; }, /* IE can't figure out what do when the offsetLeft and the clientLeft add up to 1, and the VML ends up getting fuzzy... so we have to push/enlarge things by 1 pixel and then clip off the excess */ vmlOffsets: function (el) { var thisStyle, size, fudge, makeVisible, bg, bgR, dC, altC, b, c, v; thisStyle = el.currentStyle; size = {'W':el.clientWidth+1, 'H':el.clientHeight+1, 'w':this.imgSize[el.vmlBg].width, 'h':this.imgSize[el.vmlBg].height, 'L':el.offsetLeft, 'T':el.offsetTop, 'bLW':el.clientLeft, 'bTW':el.clientTop}; fudge = (size.L + size.bLW == 1) ? 1 : 0; /* vml shape, left, top, width, height, origin */ makeVisible = function (vml, l, t, w, h, o) { vml.coordsize = w+','+h; vml.coordorigin = o+','+o; vml.path = 'm0,0l'+w+',0l'+w+','+h+'l0,'+h+' xe'; vml.style.width = w + 'px'; vml.style.height = h + 'px'; vml.style.left = l + 'px'; vml.style.top = t + 'px'; }; makeVisible(el.vml.color.shape, (size.L + (el.isImg ? 0 : size.bLW)), (size.T + (el.isImg ? 0 : size.bTW)), (size.W-1), (size.H-1), 0); makeVisible(el.vml.image.shape, (size.L + size.bLW), (size.T + size.bTW), (size.W), (size.H), 1 ); bg = {'X':0, 'Y':0}; if (el.isImg) { bg.X = parseInt(thisStyle.paddingLeft, 10) + 1; bg.Y = parseInt(thisStyle.paddingTop, 10) + 1; } else { for (b in bg) { if (bg.hasOwnProperty(b)) { this.figurePercentage(bg, size, b, thisStyle['backgroundPosition'+b]); } } } el.vml.image.fill.position = (bg.X/size.W) + ',' + (bg.Y/size.H); bgR = thisStyle.backgroundRepeat; dC = {'T':1, 'R':size.W+fudge, 'B':size.H, 'L':1+fudge}; /* these are defaults for repeat of any kind */ altC = { 'X': {'b1': 'L', 'b2': 'R', 'd': 'W'}, 'Y': {'b1': 'T', 'b2': 'B', 'd': 'H'} }; if (bgR != 'repeat' || el.isImg) { c = {'T':(bg.Y), 'R':(bg.X+size.w), 'B':(bg.Y+size.h), 'L':(bg.X)}; /* these are defaults for no-repeat - clips down to the image location */ if (bgR.search('repeat-') != -1) { /* now let's revert to dC for repeat-x or repeat-y */ v = bgR.split('repeat-')[1].toUpperCase(); c[altC[v].b1] = 1; c[altC[v].b2] = size[altC[v].d]; } if (c.B > size.H) { c.B = size.H; } el.vml.image.shape.style.clip = 'rect('+c.T+'px '+(c.R+fudge)+'px '+c.B+'px '+(c.L+fudge)+'px)'; } else { el.vml.image.shape.style.clip = 'rect('+dC.T+'px '+dC.R+'px '+dC.B+'px '+dC.L+'px)'; } }, figurePercentage: function (bg, size, axis, position) { var horizontal, fraction; fraction = true; horizontal = (axis == 'X'); switch(position) { case 'left': case 'top': bg[axis] = 0; break; case 'center': bg[axis] = 0.5; break; case 'right': case 'bottom': bg[axis] = 1; break; default: if (position.search('%') != -1) { bg[axis] = parseInt(position, 10) / 100; } else { fraction = false; } } bg[axis] = Math.ceil( fraction ? ( (size[horizontal?'W': 'H'] * bg[axis]) - (size[horizontal?'w': 'h'] * bg[axis]) ) : parseInt(position, 10) ); if (bg[axis] % 2 === 0) { bg[axis]++; } return bg[axis]; }, fixPng: function (el) { el.style.behavior = 'none'; var lib, els, nodeStr, v, e; if (el.nodeName == 'BODY' || el.nodeName == 'TD' || el.nodeName == 'TR') { /* elements not supported yet */ return; } el.isImg = false; if (el.nodeName == 'IMG') { if(el.src.toLowerCase().search(/\.png$/) != -1) { el.isImg = true; el.style.visibility = 'hidden'; } else { return; } } else if (el.currentStyle.backgroundImage.toLowerCase().search('.png') == -1) { return; } lib = DD_belatedPNG; el.vml = {color: {}, image: {}}; els = {shape: {}, fill: {}}; for (v in el.vml) { if (el.vml.hasOwnProperty(v)) { for (e in els) { if (els.hasOwnProperty(e)) { nodeStr = lib.ns + ':' + e; el.vml[v][e] = document.createElement(nodeStr); } } el.vml[v].shape.stroked = false; el.vml[v].shape.appendChild(el.vml[v].fill); el.parentNode.insertBefore(el.vml[v].shape, el); } } el.vml.image.shape.fillcolor = 'none'; /* Don't show blank white shapeangle when waiting for image to load. */ el.vml.image.fill.type = 'tile'; /* Makes image show up. */ el.vml.color.fill.on = false; /* Actually going to apply vml element's style.backgroundColor, so hide the whiteness. */ lib.attachHandlers(el); lib.giveLayout(el); lib.giveLayout(el.offsetParent); el.vmlInitiated = true; lib.applyVML(el); /* Render! */ } }; try { document.execCommand("BackgroundImageCache", false, true); /* TredoSoft Multiple IE doesn't like this, so try{} it */ } catch(r) {} DD_belatedPNG.createVmlNameSpace(); DD_belatedPNG.createVmlStyleSheet();
20. background-size： 背景图片大小设置
background-size：contain; // 缩小图片来适应元素的尺寸（保持像素的长宽比）；
background-size ：cover; // 扩展图片来填满元素（保持像素的长宽比）；
background-size ：100px 100px; // 调整图片到指定大小；
background-size ：50% 100%; // 调整图片到指定大小，百分比相对于包含元素的尺寸。
IE 和遨游不支持；
Firefox 添加私有属性 -moz-background-size 支持；
Safari 和 Chrome 添加私有属性 -webkit-background-size 支持；
Opera 不支持 background-size 属性，添加其私有属性 -o-background-size 也不支持。
在IE不支持这个属性的时候可以通过滤镜来实现这样的一个效果。
代码如下：
background-image: url('file:///F:/test/images/flashbg.jpg');
background-size: cover;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='file:///F:/test/images/flashbg.jpg', sizingMethod='scale');</strong>
这样就可以让IE也实现background-size:100%100%的效果了，注意这两个路径要一样，并且是绝对路径。
21. 解决IE6下fixed固定定位的问题
代码如下：
1 #fixed{ 2 position:fixed; 3 _position:absolute; 4 bottom:318px; 5 right:142px; 6 _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,0)||318)-(parseInt(this.currentStyle.marginBottom,10)||0))); 7 }
22. 浏览器渲染方式小结及窗口各种滚动的详解。
分两种： BackCompat，CSS1Compat 前者是怪异模式，后者是标准模式。
document.compatMode: 可以获取当前浏览器渲染方式
IE默认是BackCompat模式 Gecko内核的浏览器可以看为CSS1Compat标准模式
document.compatMode等于BackCompat时，浏览器客户区宽度是document.body.clientWidth；
document.compatMode等于CSS1Compat时，浏览器客户区宽度是document.documentElement.clientWidth。
浏览器客户区高度、滚动条高度、滚动条的Left、滚动条的Top等等都是上面的情况。
一个准确获取网页客户区的宽高、滚动条宽高、滚动条Left和Top的代码：
if (document.compatMode == \"BackCompat\") { 怪异模式 cWidth = document.body.clientWidth; cHeight = document.body.clientHeight; sWidth = document.body.scrollWidth; sHeight = document.body.scrollHeight; sLeft = document.body.scrollLeft; sTop = document.body.scrollTop; } else { //document.compatMode == \"CSS1Compat\" 标准模式 cWidth = document.documentElement.clientWidth; cHeight = document.documentElement.clientHeight; sWidth = document.documentElement.scrollWidth; sHeight = document.documentElement.scrollHeight; sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft; sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop; }
以上代码兼容目前流行的全部浏览器，包括：IE、Firefox、Safari、Opera、Chrome
23. 字体大小单位 px /em /rem
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的
1. IE无法调整那些使用px作为单位的字体大小；
2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
1. em的值并不是固定的；
2. em会继承父级元素的字体大小。
rem特点
rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是
一个例子：
p {font-size:14px; font-size:.875rem;}
选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。
24. text-overflow:ellipsis;
注意：overflow: hidden; text-overflow:ellipsis;white-space:nowrap;一定要一起用
1.一定要给容器定义宽度.
2.如果少了overflow: hidden;文字会横向撑到内容的外面.
3.如果少了white-space:nowrap;文字会把容器的高度往下撑；即使你定义了高度，省略号也不会出现，多余的文字会被裁切掉.
4.如果少了text-overflow:ellipsis;多余的文字会被裁切掉，就相当于你这样定义text-overflow:clip. 如果容器是table，当文字内容过多时，不换行，而是出现...
25. 文档下载
function downloadFile(fileName, content){ var aLink = document.createElement('a'); var blob = new Blob([content]); var evt = document.createEvent("HTMLEvents"); evt.initEvent("click", false, false); aLink.download = fileName; aLink.href = URL.createObjectURL(blob); aLink.dispatchEvent(evt); }
26. IE6下支持 :hover 的写法
在html页面引入文件：
代码如下：
body{behavior:url("csshover.htc");} /* 使用时候注意路径正确 */
27. text-overflow:ellipsis;
使用text-overflow:ellipsis对溢出文本显示省略号有两个好处，一是不用通过程序限定字数；二是有利于SEO。需要使用对对溢出文本显示省略号的通常是文章标题列表，这样处理对搜索引擎更友好，因为标题实际上并未被截字，而是局限于宽度而未被显示而已。
通常的做法是这样的：
1.overflow:hidden;
2.text-overflow:ellipsis;
3.-o-text-overflow:ellipsis;
4.white-space:nowrap;
5.width:100%;
其中，overflow: hidden和white-space: nowrap都是必须的否则不会显示省略号；-o-text-overflow: ellipsis针对Opera；而宽度的设定主要是针对IE6；
该方法支持Internet Explorer, Safari, Chrome 和 Opera，但FF并不支持，不过可以通过Jquery来实现类似的效果。
28. IE6下浮动后出现双边距
解决方法： 给元素加display:inline;
29. <link rel="canonical" href="http://www.domain.com/index.html" />
canonical标签就是告诉搜索引擎哪个页面是权威页面。在内容相同但URL不同的情况下。
30. -webkit-font-smoothing:antialiased; 字体平滑显示，用户体验较好。
31. <body onselectstart = "return false";></body> 页面内文字不被选中，在需要选择其他内容时。
32. box-sizing: border-box; 元素的内容(宽、高)和内边距都会在border范围之内;
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
33. -webkit-perspective:800px; 子元素距离视图的距离。 值为0 时没有透视效果;
<head> <style> div{ position:relative; border:1px solid #CCC; } #wrap{ width:250px; height: 150px; margin:50px padding:50px; -webkit-perspective:800px; perspective:800px; } #photo{ padding:50px; background-color:yellow; -webkit-transform:rotateY(45deg); transform:rotateY(45deg); } </style> </head> <body> <div id="wrap"> <div id="photo">我是rotateY 45deg</div> </div> </body>
待续……
