CSS3圆角支持IE火狐.doc

让IE支持CSS3圆角的方法附：ccs代码.test width:560px;height:400px;background-color: blue;padding:10px 8px 6px;border: 2px solid #C0C0C0;margin-bottom:10px;border-radius: 10px;behavior: url(ie-css3.htc);color: #FFF;如果要想在IE浏览器中实现圆角的效果，我们一般都会采用圆角图片的方式。用图片的话，基本就跟浏览器没有多大关系了，因为任何浏览器都支持这种方式。本文我们主要是讲解如果用CSS 3样式表来实现圆角效果，值得注意的是，IE6/7/8这三个IE浏览器版本都不支持CSS 3的解析，只有还不太主流的IE 9支持CSS 3和HTML 5的标准。让IE支持CSS 3的解析方法有很多种，下面介绍一种实用的让IE支持CSS 3解析的方法IE利用VML矢量可标记语言作为画笔绘出圆角：1、下载一个压缩包，里面有一个微软的脚本文件(11KB)和一个用来测试服务器是否有正确的Content-Type的HTML文 件：iecss3.rar;.htc文件是IE内核支持Web行为后用来描述此类行为的脚本文件。它们定义了一套方法和属性，程序员几乎可以把这些方法和 属性应用到HTML页面上的任何元素上去。Web 行为是非常伟大的因为它们允许程序员把自定义的功能“连接”到现有的元素和控件，而不是必须让用户下载二进制文件(例如ActiveX 控件)来完成这个功能。下载地址：/wp-content/uploads/2010/12/iecss3.rar解压后，打开test.html，如果显示效果是圆角，则可以继续。使用演示：.main 1. border:2pxsolid#C0C0C0; 2. -moz-border-radius:10px; 3. -webkit-border-radius:10px; 4. border-radius:10px; 5. position:relative; 6. z-index:2; 7. behavior:url(ie-css3.htc); 8. Webkit内核的浏览器支持“-webkit-border-radius: 10px;”属性(10px是圆角半径)，可以直接解析出圆角;Firefox浏览器支持“-moz-border-radius: 10px;”属性，也是可以直接解析出圆角;IE系浏览器则需要加上“border-radius: 15px;”的属性。注意：1、behavior的url里一定要填写ie-css3.htc的绝对路径，因为 IE浏览器找该文件是相对当前html文件路径来找的，所以对于Wordpress等动态程序生成的页面一定要填写绝对路径。2、一定要有定位属性：position:relative;3、因为在IE浏览器下这些CSS 3效果的实现是要借助于VML，由VML绘制圆角或是投影效果，所以还需要一个z-index属性。z-index属性最好设置得比较大，如2。4、如果在IE浏览器下某些模块无法用此渲染，可以试着绝对定位相应的层，即加上“ width: 400px; height:400px;”属性。5、radius属性的10px是圆角半径，还可以给两个值如“border-radius: 10px 5px;”，这样则左上角与右下角半径为10px，右上角与左下角半径为5px。也可以赋4个值，为“上 右 下 左”。附件：ie-css3.htc-Do not remove this if you are using-Original Author: Remiz RahnasOriginal Author URL: Published date: 2008/09/24Changes by Nick Fetchak:- IE8 standards mode compatibility- VML elements now positioned behind original box rather than inside of it - should be less prone to breakage- Added partial support for box-shadow style- Checks for VML support before doing anything- Updates VML element size and position via timer and also via window resize event- lots of other small thingsPublished date : 2010/03/14/ie-css3Thanks to TheBrightL (/2009/12/03/using-ies-filter-in-a-cross-browser-way) for enlightening me about the DropShadow filtertimer_length = 200; / Millisecondsborder_opacity = false; / Use opacity on borders of rounded-corner elements? Note: This causes antialiasing issues/ supportsVml() borrowed from /questions/654112/how-do-you-detect-support-for-vml-or-svg-in-a-browserfunction supportsVml() if (typeof supportsVml.supported = undefined) var a = document.body.appendChild(document.createElement(div);a.innerHTML = ;var b = a.firstChild;b.style.behavior = url(#default#VML);supportsVml.supported = b ? typeof b.adj = object: true;a.parentNode.removeChild(a);return supportsVml.supported/ findPos() borrowed from /js/findpos.htmlfunction findPos(obj) var curleft = curtop = 0;if (obj.offsetParent) do curleft += obj.offsetLeft;curtop += obj.offsetTop; while (obj = obj.offsetParent);return(x: curleft,y: curtop);function createBoxShadow(element, vml_parent) var style = element.currentStyleiecss3-box-shadow | element.currentStyle-moz-box-shadow | element.currentStyle-webkit-box-shadow | element.currentStylebox-shadow | ;var match = style.match(/(d+)px (d+)px (d+)px/);if (!match) return(false); var shadow = document.createElement(v:roundrect);shadow.userAttrs = x: parseInt(RegExp.$1 | 0),y: parseInt(RegExp.$2 | 0),radius: parseInt(RegExp.$3 | 0) / 2;shadow.position_offset = y: (0 - vml_parent.pos_ieCSS3.y - shadow.userAttrs.radius + shadow.userAttrs.y),x: (0 - vml_parent.pos_ieCSS3.x - shadow.userAttrs.radius + shadow.userAttrs.x);shadow.size_offset = width: 0,height: 0;shadow.arcsize = element.arcSize +px;shadow.style.display = block;shadow.style.position = absolute;shadow.style.top = (element.pos_ieCSS3.y + shadow.position_offset.y) +px;shadow.style.left = (element.pos_ieCSS3.x + shadow.position_offset.x) +px;shadow.style.width = element.offsetWidth +px;shadow.style.height = element.offsetHeight +px;shadow.style.antialias = true;shadow.className = vml_box_shadow;shadow.style.zIndex = element.zIndex - 1;shadow.style.filter = progid:DXImageTransform.Microsoft.Blur(pixelRadius=+ shadow.userAttrs.radius +,makeShadow=true,shadowOpacity=+ element.opacity +);element.parentNode.appendChild(shadow);/element.parentNode.insertBefore(shadow, element.element);/ For window resizingelement.vml.push(shadow);return(true);function createBorderRect(element, vml_parent) if (isNaN(element.borderRadius) return(false); element.style.background = transparent;element.style.borderColor = transparent;var rect = document.createElement(v:roundrect);rect.position_offset = y: (0.5 * element.strokeWeight) - vml_parent.pos_ieCSS3.y,x: (0.5 * element.strokeWeight) - vml_parent.pos_ieCSS3.x;rect.size_offset = width: 0 - element.strokeWeight,height: 0 - element.strokeWeight;rect.arcsize = element.arcSize +px;rect.strokeColor = element.strokeColor;rect.strokeWeight = element.strokeWeight +px;rect.stroked = element.stroked;rect.className = vml_border_radius;rect.style.display = block;rect.style.position = absolute;rect.style.top = (element.pos_ieCSS3.y + rect.position_offset.y) +px;rect.style.left = (element.pos_ieCSS3.x + rect.position_offset.x) +px;rect.style.width = (element.offsetWidth + rect.size_offset.width) +px;rect.style.height = (element.offsetHeight + rect.size_offset.height) +px;rect.style.antialias = true;rect.style.zIndex = element.zIndex - 1;if (border_opacity & (element.opacity 0) element.style.borderStyle = none;element.style.paddingTop = parseInt(element.currentStyle.paddingTop | 0) + element.strokeWeight;element.style.paddingBottom = parseInt(element.currentStyle.paddingBottom | 0) + element.strokeWeight;rect.appendChild(fill);element.parentNode.appendChild(rect);/element.parentNode.insertBefore(rect, element.element);/ For window resizingelement.vml.push(rect);return(true);function createTextShadow(element, vml_parent) if (!element.textShadow) return(false); var match = element.textShadow.match(/(d+)px (d+)px (d+)px (#?w+)/);if (!match) return(false); /var shadow = document.createElement(span);var shadow = element.cloneNode(true);var radius = parseInt(RegExp.$3 | 0);shadow.userAttrs = x: parseInt(RegExp.$1 | 0) - (radius),y: parseInt(RegExp.$2 | 0) - (radius),radius: radius / 2,color: (RegExp.$4 | #000);shadow.position_offset = y: (0 - vml_parent.pos_ieCSS3.y + shadow.userAttrs.y),x: (0 - vml_parent.pos_ieCSS3.x + shadow.userAttrs.x);shadow.size_offset = width: 0,height: 0;shadow.style.color = shadow.userAttrs.color;shadow.style.position = absolute;shadow.style.top = (element.pos_ieCSS3.y + shadow.position_offset.y) +px;shadow.style.left = (element.pos_ieCSS3.x + shadow.position_offset.x) +px;shadow.style.antialias = true;shadow.style.behavior = null;shadow.className = ieCSS3_text_shadow;shadow.innerHTML = element.innerHTML;/ For some reason it only looks right with opacity at 75%shadow.style.filter = progid:DXImageTransform.Microsoft.Alpha(Opacity=75)progid:DXImageTransform.Microsoft.Blur(pixelRadius=+ shadow.userAttrs.radius +,makeShadow=false,shadowOpacity=100);var clone = element.cloneNode(true);clone.position_offset = y: (0 - vml_parent.pos_ieCSS3.y),x: (0 - vml_parent.pos_ieCSS3.x);clone.size_offset = width: 0,height: 0;clone.style.behavior = null;clone.style.position = absolute;clone.style.top = (element.pos_ieCSS3.y + clone.position_offset.y) +px;clone.style.left = (element.pos_ieCSS3.x + clone.position_offset.x) +px;clone.className = ieCSS3_text_shadow;element.parentNode.appendChild(shadow);element.parentNode.appendChild(clone);element.style.visibility = hidden;/ For window resizingelement.vml.push(clone);element.vml.push(shadow);return(true);function ondocumentready(classID) if (!supportsVml() return(false); if (this.className.match(classID) return(false); this.className = this.className.concat( , classID);/ Add a namespace for VML (IE8 requires it)if (!spaces.v) spaces.add(v, urn:schemas-microsoft-com:vml); / Check to see if weve run once before on this pageif (typeof(window.ieCSS3) = undefined) / Create global ieCSS3 objectwindow.ieCSS3 = vmlified_elements: new Array(),update_timer: setInterval(updatePositionAndSize, timer_length);if (typeof(window.onresize) = function) window.ieCSS3.previous_onresize = window.onresize; / Attach window resize eventwindow.onresize = updatePositionAndSize;/ These attrs are for the script and have no meaning to the browser:this.borderRadius = parseInt(this.currentStyleiecss3-border-radius | this.currentStyle-moz-border-radius | this.currentStyle-webkit-border-radius | this.currentStyleborder-radius | this.currentStyle-khtml-border-radius);this.arcSize = Math.min(this.borderRadius / Math.min(this.offsetWidth, this.offsetHeight), 1);this.fillColor = this.currentStyle.backgroundColor;this.fillSrc = this.currentStyle.backgroundImage.replace(/url(.+)$/, $1);this.strokeColor = this.currentStyle.borderColor;this.strokeWeight = parseInt(this.currentStyle.borderWidth);this.stroked = true;if (isNaN(this.strokeWeight) | (this.strokeWeight = 0) this.strokeWeight = 0;this.strokeColor = fillColor;this.stroked = false;this.opacity = parseFloat(this.currentStyle.opacity | 1);this.textShadow = this.currentStyletext-shadow;this.element.vml = new Array();this.zIndex = parseInt(this.currentStyle.zIndex);if (isNaN(this.zIndex) this.zIndex = 0; / Find which element provides position:relative for the target element (default to BODY)vml_parent = this;var limit = 100, i = 0;do vml_parent = vml_parent.parentElement;i+;if (i = limit) return(false); while (typeof(vml_parent) != undefined) & (vml_parent.currentStyle.position != relative) & (vml_parent.tagName != BODY);vml_parent.pos_ieCSS3 = findPos(vml_parent);this.pos_ieCSS3 = findPos(this);var rv1 = createBoxShadow(this, vml_parent);var rv2 = createBorderRect(this, vml_parent);var rv3 = createTextShadow(this, vml_parent);if (rv1 | rv2 | rv3) window.ieCSS3.vmlified_elements.push(this.element); if (typeof(vml_parent.document.ieCSS3_stylesheet) = undefined) vml_parent.document.ieCSS3_stylesheet = vml_parent.document.createStyleSheet();vml_parent.document.ieCSS3_stylesheet.addRule(v:roundrect, behavior: url(#default#VML);vml_parent.document.ieC