圆角效果使人感觉网页更加协调美观，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个值，为“上 右 下 左”。
时间： 2024-09-30 13:39:29