圆角效果使人感觉网页更加协调美观，ie9、Opera 10.5、Safari 5、Chrome 4和Firefox 4及其以上版本都添加了对css3的支持，这让我们领略到了css3的强悍。

传统的圆角生成方案，必须使用多张图片作为背景图案。css3的出现，使得我们再也不必浪费时间去制作这些图片了，而且还有其他多个优点：

1. 减少维护的工作量。图片文件的生成、更新、编写网页代码，这些工作都不再需要了。

2. 提高网页性能。由于不必再发出多余的HTTP请求，网页的载入速度将变快。

3. 增加视觉可靠性。某些情况下（网络拥堵、服务器出错、网速过慢等等），背景图片会下载失败，导致视觉效果不佳。CSS3就不会发生这种情况。

下载一个ie-css3.htc的文件

http://download.csdn.net/download/sunshine_love/5107742

或者复制一下代码：

  1 --Do not remove this if you are using--
  2 Original Author: Remiz Rahnas
  3 Original Author URL: http://www.htmlremix.com
  4 Published date: 2008/09/24
  5
  6 Changes by Nick Fetchak:
  7 - IE8 standards mode compatibility
  8 - VML elements now positioned behind original box rather than inside of it - should be less prone to breakage
  9 - Added partial support for 'box-shadow' style
 10 - Checks for VML support before doing anything
 11 - Updates VML element size and position via timer and also via window resize event
 12 - lots of other small things
 13 Published date : 2010/03/14
 14 http://fetchak.com/ie-css3
 15
 16 Thanks to TheBrightLines.com (http://www.thebrightlines.com/2009/12/03/using-ies-filter-in-a-cross-browser-way) for enlightening me about the DropShadow filter
 17
 18 <public:attach event="ondocumentready" onevent="ondocumentready('v08vnSVo78t4JfjH')" />
 19 <script type="text/javascript">
 20
 21 timer_length = 200; // Milliseconds
 22 border_opacity = false; // Use opacity on borders of rounded-corner elements? Note: This causes antialiasing issues
 23
 24
 25 // supportsVml() borrowed from http://stackoverflow.com/questions/654112/how-do-you-detect-support-for-vml-or-svg-in-a-browser
 26 function supportsVml() {
 27     if (typeof supportsVml.supported == "undefined") {
 28         var a = document.body.appendChild(document.createElement('div'));
 29         a.innerHTML = '<v:shape id="vml_flag1" adj="1" />';
 30         var b = a.firstChild;
 31         b.style.behavior = "url(#default#VML)";
 32         supportsVml.supported = b ? typeof b.adj == "object": true;
 33         a.parentNode.removeChild(a);
 34     }
 35     return supportsVml.supported
 36 }
 37
 38
 39 // findPos() borrowed from http://www.quirksmode.org/js/findpos.html
 40 function findPos(obj) {
 41     var curleft = curtop = 0;
 42
 43     if (obj.offsetParent) {
 44         do {
 45             curleft += obj.offsetLeft;
 46             curtop += obj.offsetTop;
 47         } while (obj = obj.offsetParent);
 48     }
 49
 50     return({
 51         'x': curleft,
 52         'y': curtop
 53     });
 54 }
 55
 56 function createBoxShadow(element, vml_parent) {
 57     var style = element.currentStyle['iecss3-box-shadow'] || element.currentStyle['-moz-box-shadow'] || element.currentStyle['-webkit-box-shadow'] || element.currentStyle['box-shadow'] || '';
 58     var match = style.match(/^(\d+)px (\d+)px (\d+)px/);
 59     if (!match) { return(false); }
 60
 61
 62     var shadow = document.createElement('v:roundrect');
 63     shadow.userAttrs = {
 64         'x': parseInt(RegExp.$1 || 0),
 65         'y': parseInt(RegExp.$2 || 0),
 66         'radius': parseInt(RegExp.$3 || 0) / 2
 67     };
 68     shadow.position_offset = {
 69         'y': (0 - vml_parent.pos_ieCSS3.y - shadow.userAttrs.radius + shadow.userAttrs.y),
 70         'x': (0 - vml_parent.pos_ieCSS3.x - shadow.userAttrs.radius + shadow.userAttrs.x)
 71     };
 72     shadow.size_offset = {
 73         'width': 0,
 74         'height': 0
 75     };
 76     shadow.arcsize = element.arcSize +'px';
 77     shadow.style.display = 'block';
 78     shadow.style.position = 'absolute';
 79     shadow.style.top = (element.pos_ieCSS3.y + shadow.position_offset.y) +'px';
 80     shadow.style.left = (element.pos_ieCSS3.x + shadow.position_offset.x) +'px';
 81     shadow.style.width = element.offsetWidth +'px';
 82     shadow.style.height = element.offsetHeight +'px';
 83     shadow.style.antialias = true;
 84     shadow.className = 'vml_box_shadow';
 85     shadow.style.zIndex = element.zIndex - 1;
 86     shadow.style.filter = 'progid:DXImageTransform.Microsoft.Blur(pixelRadius='+ shadow.userAttrs.radius +',makeShadow=true,shadowOpacity='+ element.opacity +')';
 87
 88     element.parentNode.appendChild(shadow);
 89     //element.parentNode.insertBefore(shadow, element.element);
 90
 91     // For window resizing
 92     element.vml.push(shadow);
 93
 94     return(true);
 95 }
 96
 97 function createBorderRect(element, vml_parent) {
 98     if (isNaN(element.borderRadius)) { return(false); }
 99
100     element.style.background = 'transparent';
101     element.style.borderColor = 'transparent';
102
103     var rect = document.createElement('v:roundrect');
104     rect.position_offset = {
105         'y': (0.5 * element.strokeWeight) - vml_parent.pos_ieCSS3.y,
106         'x': (0.5 * element.strokeWeight) - vml_parent.pos_ieCSS3.x
107     };
108     rect.size_offset = {
109         'width': 0 - element.strokeWeight,
110         'height': 0 - element.strokeWeight
111     };
112     rect.arcsize = element.arcSize +'px';
113     rect.strokeColor = element.strokeColor;
114     rect.strokeWeight = element.strokeWeight +'px';
115     rect.stroked = element.stroked;
116     rect.className = 'vml_border_radius';
117     rect.style.display = 'block';
118     rect.style.position = 'absolute';
119     rect.style.top = (element.pos_ieCSS3.y + rect.position_offset.y) +'px';
120     rect.style.left = (element.pos_ieCSS3.x + rect.position_offset.x) +'px';
121     rect.style.width = (element.offsetWidth + rect.size_offset.width) +'px';
122     rect.style.height = (element.offsetHeight + rect.size_offset.height) +'px';
123     rect.style.antialias = true;
124     rect.style.zIndex = element.zIndex - 1;
125
126     if (border_opacity && (element.opacity < 1)) {
127         rect.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity='+ parseFloat(element.opacity * 100) +')';
128     }
129
130     var fill = document.createElement('v:fill');
131     fill.color = element.fillColor;
132     fill.src = element.fillSrc;
133     fill.className = 'vml_border_radius_fill';
134     fill.type = 'tile';
135     fill.opacity = element.opacity;
136
137     // Hack: IE6 doesn't support transparent borders, use padding to offset original element
138     isIE6 = /msie|MSIE 6/.test(navigator.userAgent);
139     if (isIE6 && (element.strokeWeight > 0)) {
140         element.style.borderStyle = 'none';
141         element.style.paddingTop = parseInt(element.currentStyle.paddingTop || 0) + element.strokeWeight;
142         element.style.paddingBottom = parseInt(element.currentStyle.paddingBottom || 0) + element.strokeWeight;
143     }
144
145     rect.appendChild(fill);
146     element.parentNode.appendChild(rect);
147     //element.parentNode.insertBefore(rect, element.element);
148
149     // For window resizing
150     element.vml.push(rect);
151
152     return(true);
153 }
154
155 function createTextShadow(element, vml_parent) {
156     if (!element.textShadow) { return(false); }
157
158     var match = element.textShadow.match(/^(\d+)px (\d+)px (\d+)px (#?\w+)/);
159     if (!match) { return(false); }
160
161
162     //var shadow = document.createElement('span');
163     var shadow = element.cloneNode(true);
164     var radius = parseInt(RegExp.$3 || 0);
165     shadow.userAttrs = {
166         'x': parseInt(RegExp.$1 || 0) - (radius),
167         'y': parseInt(RegExp.$2 || 0) - (radius),
168         'radius': radius / 2,
169         'color': (RegExp.$4 || '#000')
170     };
171     shadow.position_offset = {
172         'y': (0 - vml_parent.pos_ieCSS3.y + shadow.userAttrs.y),
173         'x': (0 - vml_parent.pos_ieCSS3.x + shadow.userAttrs.x)
174     };
175     shadow.size_offset = {
176         'width': 0,
177         'height': 0
178     };
179     shadow.style.color = shadow.userAttrs.color;
180     shadow.style.position = 'absolute';
181     shadow.style.top = (element.pos_ieCSS3.y + shadow.position_offset.y) +'px';
182     shadow.style.left = (element.pos_ieCSS3.x + shadow.position_offset.x) +'px';
183     shadow.style.antialias = true;
184     shadow.style.behavior = null;
185     shadow.className = 'ieCSS3_text_shadow';
186     shadow.innerHTML = element.innerHTML;
187     // For some reason it only looks right with opacity at 75%
188     shadow.style.filter = '\
189         progid:DXImageTransform.Microsoft.Alpha(Opacity=75)\
190         progid:DXImageTransform.Microsoft.Blur(pixelRadius='+ shadow.userAttrs.radius +',makeShadow=false,shadowOpacity=100)\
191     ';
192
193     var clone = element.cloneNode(true);
194     clone.position_offset = {
195         'y': (0 - vml_parent.pos_ieCSS3.y),
196         'x': (0 - vml_parent.pos_ieCSS3.x)
197     };
198     clone.size_offset = {
199         'width': 0,
200         'height': 0
201     };
202     clone.style.behavior = null;
203     clone.style.position = 'absolute';
204     clone.style.top = (element.pos_ieCSS3.y + clone.position_offset.y) +'px';
205     clone.style.left = (element.pos_ieCSS3.x + clone.position_offset.x) +'px';
206     clone.className = 'ieCSS3_text_shadow';
207
208
209     element.parentNode.appendChild(shadow);
210     element.parentNode.appendChild(clone);
211
212     element.style.visibility = 'hidden';
213
214     // For window resizing
215     element.vml.push(clone);
216     element.vml.push(shadow);
217
218     return(true);
219 }
220
221 function ondocumentready(classID) {
222     if (!supportsVml()) { return(false); }
223
224   if (this.className.match(classID)) { return(false); }
225     this.className = this.className.concat(' ', classID);
226
227     // Add a namespace for VML (IE8 requires it)
228     if (!document.namespaces.v) { document.namespaces.add("v", "urn:schemas-microsoft-com:vml"); }
229
230     // Check to see if we've run once before on this page
231     if (typeof(window.ieCSS3) == 'undefined') {
232         // Create global ieCSS3 object
233         window.ieCSS3 = {
234             'vmlified_elements': new Array(),
235             'update_timer': setInterval(updatePositionAndSize, timer_length)
236         };
237
238         if (typeof(window.onresize) == 'function') { window.ieCSS3.previous_onresize = window.onresize; }
239
240         // Attach window resize event
241         window.onresize = updatePositionAndSize;
242     }
243
244
245     // These attrs are for the script and have no meaning to the browser:
246     this.borderRadius = parseInt(this.currentStyle['iecss3-border-radius'] ||
247                                  this.currentStyle['-moz-border-radius'] ||
248                                  this.currentStyle['-webkit-border-radius'] ||
249                                  this.currentStyle['border-radius'] ||
250                                  this.currentStyle['-khtml-border-radius']);
251     this.arcSize = Math.min(this.borderRadius / Math.min(this.offsetWidth, this.offsetHeight), 1);
252     this.fillColor = this.currentStyle.backgroundColor;
253     this.fillSrc = this.currentStyle.backgroundImage.replace(/^url\("(.+)"\)$/, '$1');
254     this.strokeColor = this.currentStyle.borderColor;
255     this.strokeWeight = parseInt(this.currentStyle.borderWidth);
256     this.stroked = 'true';
257     if (isNaN(this.strokeWeight) || (this.strokeWeight == 0)) {
258         this.strokeWeight = 0;
259         this.strokeColor = fillColor;
260         this.stroked = 'false';
261     }
262     this.opacity = parseFloat(this.currentStyle.opacity || 1);
263     this.textShadow = this.currentStyle['text-shadow'];
264
265     this.element.vml = new Array();
266     this.zIndex = parseInt(this.currentStyle.zIndex);
267     if (isNaN(this.zIndex)) { this.zIndex = 0; }
268
269     // Find which element provides position:relative for the target element (default to BODY)
270     vml_parent = this;
271     var limit = 100, i = 0;
272     do {
273         vml_parent = vml_parent.parentElement;
274         i++;
275         if (i >= limit) { return(false); }
276     } while ((typeof(vml_parent) != 'undefined') && (vml_parent.currentStyle.position != 'relative') && (vml_parent.tagName != 'BODY'));
277
278     vml_parent.pos_ieCSS3 = findPos(vml_parent);
279     this.pos_ieCSS3 = findPos(this);
280
281     var rv1 = createBoxShadow(this, vml_parent);
282     var rv2 = createBorderRect(this, vml_parent);
283     var rv3 = createTextShadow(this, vml_parent);
284     if (rv1 || rv2 || rv3) { window.ieCSS3.vmlified_elements.push(this.element); }
285
286     if (typeof(vml_parent.document.ieCSS3_stylesheet) == 'undefined') {
287         vml_parent.document.ieCSS3_stylesheet = vml_parent.document.createStyleSheet();
288         vml_parent.document.ieCSS3_stylesheet.addRule("v\\:roundrect", "behavior: url(#default#VML)");
289         vml_parent.document.ieCSS3_stylesheet.addRule("v\\:fill", "behavior: url(#default#VML)");
290         // Compatibility with IE7.js
291         vml_parent.document.ieCSS3_stylesheet.ie7 = true;
292     }
293 }
294
295 function updatePositionAndSize() {
296     if (typeof(window.ieCSS3.vmlified_elements) != 'object') { return(false); }
297
298     for (var i in window.ieCSS3.vmlified_elements) {
299         var el = window.ieCSS3.vmlified_elements[i];
300
301         if (typeof(el.vml) != 'object') { continue; }
302
303         for (var z in el.vml) {
304             //var parent_pos = findPos(el.vml[z].parentNode);
305             var new_pos = findPos(el);
306             new_pos.x = (new_pos.x + el.vml[z].position_offset.x) + 'px';
307             new_pos.y = (new_pos.y + el.vml[z].position_offset.y) + 'px';
308             if (el.vml[z].style.left != new_pos.x) { el.vml[z].style.left = new_pos.x; }
309             if (el.vml[z].style.top != new_pos.y) { el.vml[z].style.top = new_pos.y; }
310
311             var new_size = {
312                 'width': parseInt(el.offsetWidth + el.vml[z].size_offset.width),
313                 'height': parseInt(el.offsetHeight + el.vml[z].size_offset.height)
314             }
315             if (el.vml[z].offsetWidth != new_size.width) { el.vml[z].style.width = new_size.width +'px'; }
316             if (el.vml[z].offsetHeight != new_size.height) { el.vml[z].style.height = new_size.height +'px'; }
317         }
318     }
319
320     if (event && (event.type == 'resize') && typeof(window.ieCSS3.previous_onresize) == 'function') { window.ieCSS3.previous_onresize(); }
321 }
322 </script>

使用如下：

 .banner{width: 980px;height: 472px;background-color: white;border-radius: 30px;behavior: url(./css/ie-css3.htc);  //使用绝对路径
            position:relative;z-index:2;}

说明：

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浏览器下这些CSS3效果的实现是要借助于VML，由VML绘制圆角或是投影效果，所以还需要一个z-index属性。z-index属性最好设置得比较大，如2。

4、如果在IE浏览器下某些模块无法用此渲染，可以试着绝对定位相应的层，即加上“ width: 400px; height:400px;”属性。

5、radius属性的10px是圆角半径，还可以给两个值如“border-radius: 10px 5px;”，这样则左上角与右下角半径为10px，右上角与左下角半径为5px。也可以赋4个值，为“上  右  下  左”。

转载于:https://www.cnblogs.com/justyq/p/4967026.html

IE6,7,8中兼容css3圆角问题相关推荐

  1. html圆角兼容jq,IE兼容css3圆角的htc解决方法

    现在css3的border-radius属性可以很方便的实现圆角功能,对网站前台人员无疑是一件喜事,但悲剧的是IE6/7/8并不支持,让我们弃新技术不用,是不可能的,因此找到了一种解决的办法--- I ...

  2. IE兼容CSS3圆角border-radius，box-shadow，text-shadow的方法

    1.CSS box {-moz-border-radius: 15px; /* Firefox */-webkit-border-radius: 15px; /* Safari 和 Chrome */ ...

  3. IE中的CSS3不完全兼容方案

    IE中的CSS3不完全兼容方案 Opacity透明度 元素的透明度在IE中可以很方便的用滤镜来实现. view source print? 1 background-color:green; 2 op ...

  4. 兼容所有浏览器的CSS3圆角效果

    解决CSS3圆角兼容所有浏览器的方法.本文提到了一种很不错的实现跨浏览器圆角的解决方案. 前一段时间,我经常收到一个关于如何在IE浏览器中使用CSS3的border-radius属性实现圆角HTML元 ...

  5. CSS3 经典教程系列：CSS3 圆角（border-radius）详解

    <CSS3 入门教程系列>前一篇文章详细介绍了 CSS3 RGBA 特性的用法,今天这篇文章我们在一起来看看 CSS3 中用于实现圆角效果的 border-radius 属性的具体用法. ...

  6. css 渐变 椭圆,CSS3圆角和渐变2种常用功能详解

    Css3圆角讲解:想必大家对于图片,背景圆角,都不陌生吧, 圆角语法:border-radius:圆角值: CSS3圆角的优点 传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我 ...

  7. 【转】CSS3 圆角 阴影 渐变 透明 旋转等功能详述

    本文转载自yu0319@126<CSS3圆角阴影渐变透明旋转等功能详述> 随着浏览器的升级,CSS3已经可以投入实际应用了. 但是,不同的浏览器有不同的CSS3实现,兼容性是一个大问题.上 ...

  8. css3-pie,PIE使IE支持CSS3圆角盒阴影与渐变渲染

    一.PIE之简述 在国外,CSS3的盛行与普及,探讨与研究要比国内领先不知多少个身位.相比之下,国内似乎如一潭死水,为何?我觉得国内领先的前端团队应该通过自身的影响力,带动国内整个前端领域与时俱进.然 ...

  9. 彻底搞明白：CSS3圆角使用

    引言 web开发中使用css对页面进行排版布局,CSS3是层叠样式表(Cascading StyleSheet)语言的最新版本,它的一大优点就是支持圆角.本文根据实际项目开发经验,对border-ra ...

最新文章

  1. Spring3.0中的前置通知、后置通知、环绕通知、异常通知
  2. 集合转换Stream流式操作
  3. c#sort升序还是降序_c# List的sort排序方法详解
  4. ioc spring 上机案例_通过实例解析Spring Ioc项目实现过程
  5. 图文+动画讲解排序算法总结！！
  6. 蚂蚁集团换帅！胡晓明辞任 CEO
  7. java并发包下的lock接口与syschronized关键字的区别
  8. 1.3 Zend_Acl (3)
  9. ERROR 1010 (HY000): Error dropping database (can't rmdir './myapp', errno: 39)
  10. linux ftell函数（用于得到文件位置指针当前位置相对于文件首的偏移字节数）计算文件的字节大小
  11. 手把手学习企业型网站之三firework做顶部的banner+nav
  12. 解决vscode打开txt文件乱码
  13. iOS之推荐六款不错的 iOS 15 Safari 浏览器扩展
  14. 桌面云服务器联想,联想Livc桌面云解决方案产品介绍
  15. Eclipse官网查找历史版本Eclipse
  16. [CF1503E]2-Coloring
  17. c语言中的.c文件和.h文件
  18. 分分钟拯救监控知识体系
  19. MultiNet：自主驾驶中的实时联合语义推理 论文翻译
  20. jmh气象传真图网站_《气象传真图的应用》电子书下载，《气象传真图的应用》在线阅读，书星网...

热门文章

  1. 贝索斯专访：亚马逊帝国大规模业务转型的秘诀
  2. 2017年中国自动驾驶最全产业研究报告 99页
  3. 学习如何写 Bug 的一天！ | 每日趣闻
  4. 高频一线大厂 Python 面试题：算法+爬虫+数据处理+基础
  5. 漫画：设计模式之 “工厂模式”
  6. 2020年，对薪资不满意的程序员要注意了...
  7. P1494 小Z的袜子
  8. Java还欠缺什么才能真正支持机器/深度学习？
  9. pip删除依赖、配置虚拟环境
  10. 远程桌工具-Remote Desktop Organizer