border-radius.htc为ie6-8实现圆角
2014-04-14 15:19
351 查看
~~圆角是比较常用的css3属性,但是ie6-8并不支持圆角,可用border-radius.htc html组件实现圆角, border-radius.htc内部应用vml进行了重绘
border-radius.htc:
border-radius.htc:
--Do not remove this if you are using-- Original Author: Remiz Rahnas Original Author URL: http://www.htmlremix.com Published date: 2008/09/24 Changes 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 Published date : 2009/11/18 <public:attach event="oncontentready" onevent="oncontentready('v08vnSVo78t4JfjH')" /> <script type="text/javascript"> // findPos() borrowed from http://www.quirksmode.org/js/findpos.html function 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 oncontentready(classID) { if (this.className.match(classID)) { return(false); } if (!document.namespaces.v) { document.namespaces.add("v", "urn:schemas-microsoft-com:vml"); } this.className = this.className.concat(' ', classID); var arcSize = Math.min(parseInt(this.currentStyle['-moz-border-radius'] || this.currentStyle['-webkit-border-radius'] || this.currentStyle['border-radius'] || this.currentStyle['-khtml-border-radius']) / Math.min(this.offsetWidth, this.offsetHeight), 1); var fillColor = this.currentStyle.backgroundColor; var fillSrc = this.currentStyle.backgroundImage.replace(/^url\("(.+)"\)$/, '$1'); var strokeColor = this.currentStyle.borderColor; var strokeWeight = parseInt(this.currentStyle.borderWidth); var stroked = 'true'; if (isNaN(strokeWeight)) { strokeWeight = 0; strokeColor = fillColor; stroked = 'false'; } this.style.background = 'transparent'; this.style.borderColor = 'transparent'; // Find which element provides position:relative for the target element (default to BODY) var el = this; var limit = 100, i = 0; while ((typeof(el) != 'unknown') && (el.currentStyle.position != 'relative') && (el.tagName != 'BODY')) { el = el.parentElement; i++; if (i >= limit) { return(false); } } var el_zindex = parseInt(el.currentStyle.zIndex); if (isNaN(el_zindex)) { el_zindex = 0; } //alert('got tag '+ el.tagName +' with pos '+ el.currentStyle.position); var rect_size = { 'width': this.offsetWidth - strokeWeight, 'height': this.offsetHeight - strokeWeight }; var el_pos = findPos(el); var this_pos = findPos(this); this_pos.y = this_pos.y + (0.5 * strokeWeight) - el_pos.y; this_pos.x = this_pos.x + (0.5 * strokeWeight) - el_pos.x; var rect = document.createElement('v:roundrect'); rect.arcsize = arcSize +'px'; rect.strokecolor = strokeColor; rect.strokeWeight = strokeWeight +'px'; rect.stroked = stroked; rect.style.display = 'block'; rect.style.position = 'absolute'; rect.style.top = this_pos.y +'px'; rect.style.left = this_pos.x +'px'; rect.style.width = rect_size.width +'px'; rect.style.height = rect_size.height +'px'; rect.style.antialias = true; rect.style.zIndex = el_zindex - 1; var fill = document.createElement('v:fill'); fill.color = fillColor; fill.src = fillSrc; fill.type = 'tile'; rect.appendChild(fill); el.appendChild(rect); var css = el.document.createStyleSheet(); css.addRule("v\\:roundrect", "behavior: url(#default#VML)"); css.addRule("v\\:fill", "behavior: url(#default#VML)"); isIE6 = /msie|MSIE 6/.test(navigator.userAgent); // IE6 doesn't support transparent borders, use padding to offset original element if (isIE6 && (strokeWeight > 0)) { this.style.borderStyle = 'none'; this.style.paddingTop = parseInt(this.currentStyle.paddingTop || 0) + strokeWeight; this.style.paddingBottom = parseInt(this.currentStyle.paddingBottom || 0) + strokeWeight; } if (typeof(window.rounded_elements) == 'undefined') { window.rounded_elements = new Array(); if (typeof(window.onresize) == 'function') { window.previous_onresize = window.onresize; } window.onresize = window_resize; } this.element.vml = rect; window.rounded_elements.push(this.element); } function window_resize() { if (typeof(window.rounded_elements) == 'undefined') { return(false); } for (var i in window.rounded_elements) { var el = window.rounded_elements[i]; var strokeWeight = parseInt(el.currentStyle.borderWidth); if (isNaN(strokeWeight)) { strokeWeight = 0; } var parent_pos = findPos(el.vml.parentNode); var pos = findPos(el); pos.y = pos.y + (0.5 * strokeWeight) - parent_pos.y; pos.x = pos.x + (0.5 * strokeWeight) - parent_pos.x; el.vml.style.top = pos.y +'px'; el.vml.style.left = pos.x +'px'; } if (typeof(window.previous_onresize) == 'function') { window.previous_onresize(); } } </script>
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> .d1{-webkit-border-radius:5px; border:3px solid #f00; -moz-border-radius:5px; width:300px; height:300px; background:#aaa; border-radius:5px; behavior:url(htc/border-radius.htc);} //注意htc文件的相对路径是 相对html文件的 </style> </head> <body> <div class="d1" id="d1"></div> </body> </html>
相关文章推荐
- 使用border-radius实现圆角,兼容到IE6
- CSS3 border-radius实现边框圆角
- 让IE6也识别CSS3-圆角效果应用border-radius
- 用CSS3的 border-radius 来轻松实现图层圆角
- CSS3实例:border-radius圆角的优雅实现
- CSS3利用border-radius实现边框圆角
- 让IE实现CSS3中的border-radius(圆角)
- CSS3 border-radius实现边框圆角
- 让IE实现CSS3中的border-radius(圆角)
- 实现CSS3中的border-radius(边框圆角)示例代码
- css3 实现圆角边框的border-radius属性和实现阴影效果的box-shadow属性
- css复习——opacity(不透明度)、IE6固定定位、border-radius(圆角)
- 设置文本框:四个直角边变为圆角(border-top-left-radius)
- IE6下完美兼容css3圆角和阴影属性的htc插件PIE.htc
- 用CSS3的圆角border-radius属性,画一个圆形
- border-radius边框圆角效果(CSS3)
- border属性实现三角、圆角图形
- css3(border-radius)边框圆角详解
- CSS3 圆角属性 border-radius和-webkit-border-radius使用
- CSS3之边框圆角:border-radius