圆角CSS3圆角支持IE火狐

让IE支持CSS3圆角的方法

附 ccs代码

<style type="text/css">

. 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;

}

</style>

如果要想在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控件)来完成这个功能。

下载地址http://www. iefans.net/wp-content/uploads/2010/12/iecss3.rar

解压后打开test.html如果显示效果是圆角则可以继续。

使用演示

.main{

1. border: 2px solid #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 Autho r:Remiz Rahna s

Original Autho r URL:http://www.htmlremix.c om

Published date:2008/09/24

Changes by Nick Fetchak:

- IE8 standards mode compatibil ity

-VML elements now positioned behind original box rather than inside of it - should be less proneto breakage

-Added partial support for'box-shadow' style

-Checks for VML support before doing anything

-Updates VML eleme nt size and position via timer and also via window resize event

- lots of other small thing s

Published date :2010/03/14http://fetc hak.c om/ie-c ss 3

Thanks to TheBr ightLines.com(http://www.thebrightlines.c om/2009/12/03/using-ies-filter-in-a-cros s-brow ser-way) forenlightening me about the DropShadow filter

<public:attac h event="ondoc umentready"onevent="ondocumentready('v08vnSVo78t4Jfj H')" /><script type="text/javascript">timer_length=200; //Milli sec ondsborder_opacity=false; //Use opacity on borders of rounded-corner elements?Note:This causesantialiasing issues

// supportsVml() borrowed fromhttp://stackoverflow.c om/questions/654112/how-do-you-detect-support-for-vml-or-svg-in-a-brow serfunction supportsVml() {if(typeof supportsVml.supported=="undefined") {var a=doc ument.body.appendChild(doc ument.c reateElem ent('div'));a.inner HTML='<v:shape id="vml_flag 1"adj="1" />' ;var b=a.firstChild;b.s tyle.b ehavi or="url(#default#VML)";supportsVml.supported=b?typeof b.adj=="objec t": true;a.parentNode.removeChil d(a);

}return supportsVml.supported

}

//findPos()borrowed from http://www.quirksmode.org/js/findpos.htmlfunction findPos(obj) {var curleft=curtop=0;if(obj.offs etP arent) {do {c urleft+=obj.offs etLeft;curtop+=obj.offs etTop;

}while(obj=obj.offs etParent);

}r e turn({

'x' :c ur left,

'y' :c urtop

});

}function createBoxS hadow(element,vml_parent) {var style = element.currentStyle['iec s s 3-box-shadow'] | |element.c urrentS tyle['-moz-box-s hadow'] | | element.c urrentS tyle['-w ebkit-box-s hadow'] | |element.c urrentS tyle['box-s hadow'] | | ' ' ;var match=style.match(/^(\d+)px(\d+)px(\d+)px/);if(!matc h) { return(fals e); }var shadow=document.createElem ent('v:roundrect');s hadow.us erAttrs={

'x' :pars eInt(RegExp.$1 | |0),

'y' :pars eInt(RegExp.$2| |0),

'radius' :pars eInt(RegExp.$3 | |0) /2

};shadow.position_offs et={

'y' : (0-vml_parent.po s_ieCS S 3.y- s hadow.us erAttrs.radius+shadow.us erAttrs.y),

'x' : (0-vml_parent.po s_ieCS S 3.x- s hadow.us erAttrs.radius+shadow.us erAttrs.x)

};shadow.size_offs et={

'w idth' :0,

'height' :0

};shadow.arc size=element.arc Size+'px';shadow.style.display='bloc k' ;shadow.style.pos ition='abs olute' ;shadow.style.top=(element.pos_ieCS S3.y+shadow.position_offset.y)+'px' ;shadow.style.left=(element.pos_ieCS S3.x+shadow.position_offset.x)+'px' ;s hadow.s tyle.w idth=element.o ffs etWidt h+'px' ;shadow.style.height=element.offs etHeig ht+'px';s hadow.s tyle.antialias=true;shadow.c las sName='vml_box_shadow';shadow.style.zIndex=element.zIndex- 1;shadow.style.filter = 'progid:DXImageTrans form.Microsoft.Blur(pixel Radiu s='+s hadow.us erAttrs.radius+',make Shadow=true,s hadow Opacity='+element.opac ity+')';element.parentNode.appendChild(shado w);

//element.parentNode.ins ertBefo re(shadow,element.eleme nt);

//For window resizing

element.vml.push(shadow);r eturn(tru e);

}function createBord erRect(element,vml_parent) {if(is NaN(eleme nt.b orderRadius)) {return(fals e); }element.s tyle.bac kground='transparent' ;element.style.borderColo r='transparent' ;var rect=document.createElem ent('v:roundrect');rect.position_offset={

'y' : (0.5* element.strokeWeight) -vml_parent.pos_ieCS S 3.y,

'x' : (0.5* element.strokeWeig ht) -vml_parent.pos_ieCS S 3.x

};rect.size_offset={

'w idth' :0- element.s trokeWeig ht,

'height' :0- element.s trokeWeig ht

};rect.arcsize=element.arc Size+'px' ;rect.strokeColor=element.strokeColo r;rec t.s trokeWeight=element.s trokeWeig ht+'px';rec t.stroked=element.stroked;rect.className='vml_border_radius' ;rec t.style.display='bloc k' ;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';rec t.s tyle.w idth=(element.offs etWidth+rec t.s ize_offs et.w idth)+'px' ;rect.style.height=(element.offsetHeight+rect.size_offset.height)+'px';rec t.s tyle.antia lias=true;rec t.style.zIndex=element.zIndex- 1;if(border_opac ity&&(element.opac ity<1)) {rect.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity='+pars eFloat(element.opac ity* 100)+')' ;

}var fill=document.createElem ent('v:fill');fill.color=element.fillC olor;fill.src=element.fillS rc;fill.c las sName='vml_border_radius_fill' ;fill.typ e='tile' ;

fill.opac ity=element.opac ity;

//Hack: IE6 doesn't support transparent borders,use padding to offset original eleme ntisIE6=/msie|MSIE 6/.test(navigator.userAgent);if(is IE6&&(element.s trokeWeig ht>0)) {element.style.borderStyle='none';element.s tyle.paddingT op = pars eInt(element.c urrentStyle.paddingT op | | 0)+element.s trokeWeig ht;element.s tyle.paddingBot tom= pars eInt(element.c urrentStyle.paddingBot tom| | 0)+eleme nt.strokeWeig ht;

}rect.appendChil d(fill);element.parentNode.appendChil d(rect);

//element.parentNode.ins ertBefo re(rec t,element.eleme nt);

//For window resizingelement.vml.push(rect);r eturn(tru e);

}function createTextShadow(element,vml_parent) {if(!element.textS hadow) {return(fals e); }var match=element.textShadow.match(/^(\d+)px(\d+)px(\d+)px(#?\w+)/);if(!matc h) { return(fals e); }

//var shadow=document.createElem ent('span');var shadow=element.c loneNode(true);var radius=parseInt(RegExp.$3 | |0);s hadow.us erAttrs={

'x' :pars eInt(RegExp.$1 | |0) - (radius),

'y' :pars eInt(RegExp.$2| |0) - (radius),

'radius' :radius /2,

'c olor' : (RegExp.$4| | '#000')

};shadow.position_offs et={

'y' : (0-vml_parent.pos_ieCS S 3.y+shadow.us erAttrs.y),

'x' : (0-vml_parent.pos_ieCS S 3.x+shadow.us erAttrs.x)

};shadow.size_offset={

'w idth' :0,

'height' :0

};shadow.style.c olor=shadow.us erAttrs.c olor;shadow.style.pos ition='abs olute' ;shadow.style.top=(element.pos_ieCS S3.y+shadow.position_offset.y)+'px' ;shadow.style.left=(element.pos_ieCS S3.x+shadow.position_offset.x)+'px' ;shadow.style.antialias=true;shadow.style.behavior=null;shadow.clas sName='ieCS S3_text_shadow' ;s hadow.innerHTML=element.inner HT M L;

//For some reason it only looks right with opacity at 75%shadow.style.filter='\progid:DXImageTransform.Microsoft.Alpha(Opacity=75)\progid:DXImageTrans form.Micros oft.Blur(pixel Radiu s='+ shadow.us erAttrs.radius+',makeShadow=fals e,s hadow Opacity=100)\

' ;var c lone=element.c loneNode(true);clone.position_offset={

'y' : (0-vml_parent.pos_ieCS S 3.y),

'x' : (0-vml_parent.pos_ieCS S 3.x)

};clone.size_offset={

'w idth' :0,

'height' :0

};c lone.style.behavior=null;c lone.style.position='absolute' ;c lone.style.top=(element.pos_ieCS S3.y+c lone.position_offset.y)+'px' ;clone.style.left=(element.pos_ieCSS3.x+clone.position_offset.x)+'px' ;clone.className='ieCS S3_text_shadow' ;element.parentNode.appendChil d(shado w);element.parentNode.appendChild(c lone);element.s tyle.vis ib ility='hidden';

//For window resizingelement.vml.push(c lone);element.vml.push(shadow);r eturn(tru e);

}

func tion ondocumentready(c las sID) {if(!s upp orts Vml()) {return(fals e); }if(this.c las sName.matc h(c las sID)) {return(fals e); }this.c las sName=this.c las sName.c onc at(' ',c las sID);

//Add a namespace for VML(IE8 requires it)if (!doc ument.namespac es.v) { doc ument.names pac es.add("v","urn:schemas-microsoft-c om:vml"); }

//Check to see if we've run once before on this pageif(typeof(window.ieCS S3)=='undefined') {

//Create global ieCSS 3 objec twindow.ieCSS3={

'vmlified_elements' :new Array(),

'update_timer' : s etInterval(updatePos itionAndSiz e, timer_leng th)

};if (typeof(window.onresize)== 'function') { window.ieCS S 3.previous_onresize =window.onresize; }

//Attach window resize eventwindow.onresize=updatePositionAndSiz e;

}

//These attrs are for the script and have no meaning to the browser:this.borderRadius=pars eInt(this.c urrentStyle['iec s s3-border-radiu s'] | |this.c urrentStyle['-moz-border-radius'] | |this.c urrentS tyle['-w ebkit-border-radius'] | |this.c urrentS tyle['border-radiu s'] | |this.c urrentS tyle['-khtml-border-radiu s']);this.arc S ize =Math.min(this.borderRadius /Math.min(this.o ffs etWidth, this.o ffs etHeig ht),

1);this.fillC olor=this.c urrentStyle.bac kgroundColor;this.fillS rc=this.c urrent S tyle.b ac kgroundImage.rep la c e(/^url\("(.+)"\)$/, '$1');this.s trokeColor=this.c urrentS tyle.borderColor;this.s trokeWeight=pars eInt(this.c urrentS tyle.borderWidt h);this.s tr o ke d='tru e';if(is NaN(this.s trokeWeight) | | (this.s trokeWeig ht==0)) {this.s trokeWeig ht=0;this.strokeColor=fillC olor;this.s tr oke d='fals e' ;

}this.op ac ity=p ar s eF lo at(this.c urrent S tyle.op ac ity| | 1);this.textS hadow=this.c urrentS tyle['text-s hadow'];this.element.vml=new Array();this.zIndex=pars eInt(this.c urrentStyle.zIndex);if(is NaN(this.zIndex)) { this.zIndex=0; }

//Find which element provides position:relat ive for the target element (default to BODY)vml_p ar ent=this;var limit=100, i=0;do {vml_p arent=vml_parent.parentElem ent;i++;if(i>=lim it) { r eturn(fals e); }

} while ((typeof(vml_parent) != 'undefined') && (vml_parent.c urrentStyle.pos it ion !='relative')&&(vml_parent.tagName !='BOD Y'));vml_parent.pos_ieCS S 3=findPos(vml_parent);this.p o s_ieC S S 3=findPo s(this);var rv 1=createBoxS hadow(this,vml_parent);var rv2=createBord erRec t(this,vml_parent);var rv3=createTextShadow(this,vml_parent);if(rv 1 | |rv2| |rv3) {window.ieCS S 3.vmlified_e lements.push(this.element); }if(typeof(vml_parent.doc ument.ieCS S 3_stylesheet)=='undefined') {vml_parent.document.ieCS S 3_styleshe et=vml_parent.document.createStyleShee t();vml_parent.doc ument.ieCS S 3_styleshe et.addRule("v\\:roundrec t", "behavior:ur l(#de fault#VML)");vml_parent.doc ument.ieCS S 3_styleshe et.addRule("v\\:fill", "behavior:ur l(#de fault#VML)");

//Compatibility with IE7.jsvml_parent.doc ument.ieCS S 3_s tyleshe et.ie7=true;

}

}function updatePositionAndSize() {if(typeof(w indow.ieCS S 3.vmlified_e lements) !='objec t') {return(fals e); }for(var i in window.ieCSS3.vmlified_elemen ts) {var el=window.ieCSS3.vmlified_elements[i];if(typeof(el.vml) !='objec t') {c ontinue; }