css部分
yuan {
border: 2px solid #C0C0C0;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
position: relative;
padding: 5px;
/* background: #FFF; */
z-index: 2;
overflow: hidden;
width: 100px;
height: 100px;
behavior: url(ie-css3.htc);
}
html部分
DIVCSS5圆角实例
CSS3版本圆角实例，
支持低版本IE6-IE9浏览器
var match = style.match(/^(\d+)px (\d+)px (\d+)px/);
if (!match) { return(false); }
var shadow = document.createElement(&＃39;v:roundrect&＃39;);
shadow.userAttrs = {
&＃39;x&＃39;: parseInt(RegExp.$1 || 0),
&＃39;y&＃39;: parseInt(RegExp.$2 || 0),
&＃39;radius&＃39;: parseInt(RegExp.$3 || 0) / 2
};
shadow.position_offset = {
&＃39;y&＃39;: (0 - vml_parent.pos_ieCSS3.y - shadow.userAttrs.radius + shadow.userAttrs.y),
&＃39;x&＃39;: (0 - vml_parent.pos_ieCSS3.x - shadow.userAttrs.radius + shadow.userAttrs.x)
};
shadow.size_offset = {
&＃39;width&＃39;: 0,
&＃39;height&＃39;: 0
};
shadow.arcsize = element.arcSize +&＃39;px&＃39;;
shadow.style.display = &＃39;block&＃39;;
shadow.style.position = &＃39;absolute&＃39;;
shadow.style.top = (element.pos_ieCSS3.y + shadow.position_offset.y) +&＃39;px&＃39;;
shadow.style.left = (element.pos_ieCSS3.x + shadow.position_offset.x) +&＃39;px&＃39;;
shadow.style.width = element.offsetWidth +&＃39;px&＃39;;
shadow.style.height = element.offsetHeight +&＃39;px&＃39;;
shadow.style.antialias = true;
shadow.className = &＃39;vml_box_shadow&＃39;;
shadow.style.zIndex = element.zIndex - 1;
shadow.style.filter = &＃39;progid:DXImageTransform.Microsoft.Blur(pixelRadius=&＃39;+ shadow.userAttrs.radius +&＃39;,makeShadow=true,shadowOpacity=&＃39;+ element.opacity +&＃39;)&＃39;;
element.parentNode.appendChild(shadow);
//element.parentNode.insertBefore(shadow, element.element);
// For window resizing
element.vml.push(shadow);
return(true);
}
function createBorderRect(element, vml_parent) {
if (isNaN(element.borderRadius)) { return(false); }
element.style.background = &＃39;transparent&＃39;;
element.style.borderColor = &＃39;transparent&＃39;;
var rect = document.createElement(&＃39;v:roundrect&＃39;);
rect.position_offset = {
&＃39;y&＃39;: (0.5 * element.strokeWeight) - vml_parent.pos_ieCSS3.y,
&＃39;x&＃39;: (0.5 * element.strokeWeight) - vml_parent.pos_ieCSS3.x
};
rect.size_offset = {
&＃39;width&＃39;: 0 - element.strokeWeight,
&＃39;height&＃39;: 0 - element.strokeWeight
};
rect.arcsize = element.arcSize +&＃39;px&＃39;;
//rect.arcsize = element.arcSize / (element.offsetWidth + rect.size_offset.width);
rect.strokeColor = element.strokeColor;
rect.strokeWeight = element.strokeWeight +&＃39;px&＃39;;
rect.stroked = element.stroked;
rect.className = &＃39;vml_border_radius&＃39;;
rect.style.display = &＃39;block&＃39;;
rect.style.position = &＃39;absolute&＃39;;
rect.style.top = (element.pos_ieCSS3.y + rect.position_offset.y) +&＃39;px&＃39;;
rect.style.left = (element.pos_ieCSS3.x + rect.position_offset.x) +&＃39;px&＃39;;
rect.style.width = (element.offsetWidth + rect.size_offset.width) +&＃39;px&＃39;;
rect.style.height = (element.offsetHeight + rect.size_offset.height) +&＃39;px&＃39;;
rect.style.antialias = true;
rect.style.zIndex = element.zIndex - 1;
if (border_opacity && (element.opacity <1)) {
rect.style.filter = &＃39;progid:DXImageTransform.Microsoft.Alpha(Opacity=&＃39;+ parseFloat(element.opacity * 100) +&＃39;)&＃39;;
}
var fill = document.createElement(&＃39;v:fill&＃39;);
fill.color = element.fillColor;
fill.src = element.fillSrc;
fill.className = &＃39;vml_border_radius_fill&＃39;;
fill.type = &＃39;tile&＃39;;
fill.opacity = element.opacity;
// Hack: IE6 doesn&＃39;t support transparent borders, use padding to offset original element
isIE6 = /msie|MSIE 6/.test(navigator.userAgent);
if (isIE6 && (element.strokeWeight > 0)) {
element.style.borderStyle = &＃39;none&＃39;;
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 resizing
element.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(&＃39;span&＃39;);
var shadow = element.cloneNode(true);
var radius = parseInt(RegExp.$3 || 0);
shadow.userAttrs = {
&＃39;x&＃39;: parseInt(RegExp.$1 || 0) - (radius),
&＃39;y&＃39;: parseInt(RegExp.$2 || 0) - (radius),
&＃39;radius&＃39;: radius / 2,
&＃39;color&＃39;: (RegExp.$4 || &＃39;#000&＃39;)
};
shadow.position_offset = {
&＃39;y&＃39;: (0 - vml_parent.pos_ieCSS3.y + shadow.userAttrs.y),
&＃39;x&＃39;: (0 - vml_parent.pos_ieCSS3.x + shadow.userAttrs.x)
};
shadow.size_offset = {
&＃39;width&＃39;: 0,
&＃39;height&＃39;: 0
};
shadow.style.color = shadow.userAttrs.color;
shadow.style.position = &＃39;absolute&＃39;;
shadow.style.top = (element.pos_ieCSS3.y + shadow.position_offset.y) +&＃39;px&＃39;;
shadow.style.left = (element.pos_ieCSS3.x + shadow.position_offset.x) +&＃39;px&＃39;;
shadow.style.antialias = true;
shadow.style.behavior = null;
shadow.className = &＃39;ieCSS3_text_shadow&＃39;;
shadow.innerHTML = element.innerHTML;
// For some reason it only looks right with opacity at 75%
shadow.style.filter = &＃39;progid:DXImageTransform.Microsoft.Alpha(Opacity=75)progid:DXImageTransform.Microsoft.Blur(pixelRadius=&＃39;+ shadow.userAttrs.radius +&＃39;,makeShadow=false,shadowOpacity=100)&＃39;;
var clOne= element.cloneNode(true);
clone.position_offset = {
&＃39;y&＃39;: (0 - vml_parent.pos_ieCSS3.y),
&＃39;x&＃39;: (0 - vml_parent.pos_ieCSS3.x)
};
clone.size_offset = {
&＃39;width&＃39;: 0,
&＃39;height&＃39;: 0
};
clone.style.behavior = null;
clone.style.position = &＃39;absolute&＃39;;
clone.style.top = (element.pos_ieCSS3.y + clone.position_offset.y) +&＃39;px&＃39;;
clone.style.left = (element.pos_ieCSS3.x + clone.position_offset.x) +&＃39;px&＃39;;
clone.className = &＃39;ieCSS3_text_shadow&＃39;;
element.parentNode.appendChild(shadow);
element.parentNode.appendChild(clone);
element.style.visibility = &＃39;hidden&＃39;;
// For window resizing
element.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(&＃39; &＃39;, classID);
// Add a namespace for VML (IE8 requires it)
if (!document.namespaces.v) { document.namespaces.add("v", "urn:schemas-microsoft-com:vml"); }
// Check to see if we&＃39;ve run once before on this page
if (typeof(window.ieCSS3) == &＃39;undefined&＃39;) {
// Create global ieCSS3 object
window.ieCSS3 = {
&＃39;vmlified_elements&＃39;: new Array(),
&＃39;update_timer&＃39;: setInterval(updatePositionAndSize, timer_length)
};
if (typeof(window.onresize) == &＃39;function&＃39;) { window.ieCSS3.previous_Onresize= window.onresize; }
// Attach window resize event
window.Onresize= updatePositionAndSize;
}
// These attrs are for the script and have no meaning to the browser:
this.borderRadius = parseInt(this.currentStyle[&＃39;iecss3-border-radius&＃39;] ||
this.currentStyle[&＃39;-moz-border-radius&＃39;] ||
this.currentStyle[&＃39;-webkit-border-radius&＃39;] ||
this.currentStyle[&＃39;border-radius&＃39;] ||
this.currentStyle[&＃39;-khtml-border-radius&＃39;]);
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\("(.+)"\)$/, &＃39;$1&＃39;);
//add by emptyhua@gmail.com
if (this.fillSrc == &＃39;none&＃39;)
this.fillSrc = &＃39;Javascript:void(0);&＃39;;
this.strokeColor = this.currentStyle.borderColor;
this.strokeWeight = parseInt(this.currentStyle.borderWidth);
this.stroked = &＃39;true&＃39;;
if (isNaN(this.strokeWeight) || (this.strokeWeight == 0)) {
this.strokeWeight = 0;
this.strokeColor = fillColor;
this.stroked = &＃39;false&＃39;;
}
this.opacity = parseFloat(this.currentStyle.opacity || 1);
this.textShadow = this.currentStyle[&＃39;text-shadow&＃39;];
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) != &＃39;undefined&＃39;) && (vml_parent.currentStyle.position != &＃39;relative&＃39;) && (vml_parent.tagName != &＃39;BODY&＃39;));
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) == &＃39;undefined&＃39;) {
vml_parent.document.ieCSS3_stylesheet = vml_parent.document.createStyleSheet();
vml_parent.document.ieCSS3_stylesheet.addRule("v\\:roundrect", "behavior: url(#default#VML)");
vml_parent.document.ieCSS3_stylesheet.addRule("v\\:fill", "behavior: url(#default#VML)");
// Compatibility with IE7.js
vml_parent.document.ieCSS3_stylesheet.ie7 = true;
}
}
function updatePositionAndSize() {
if (typeof(window.ieCSS3.vmlified_elements) != &＃39;object&＃39;) { return(false); }
for (var i in window.ieCSS3.vmlified_elements) {
var el = window.ieCSS3.vmlified_elements[i];
if (typeof(el.vml) != &＃39;object&＃39;) { continue; }
for (var z in el.vml) {
//var parent_pos = findPos(el.vml[z].parentNode);
var new_pos = findPos(el);
new_pos.x = (new_pos.x + el.vml[z].position_offset.x) + &＃39;px&＃39;;
new_pos.y = (new_pos.y + el.vml[z].position_offset.y) + &＃39;px&＃39;;
if (el.vml[z].style.left != new_pos.x) { el.vml[z].style.left = new_pos.x; }
if (el.vml[z].style.top != new_pos.y) { el.vml[z].style.top = new_pos.y; }
var new_size = {
&＃39;width&＃39;: parseInt(el.offsetWidth + el.vml[z].size_offset.width),
&＃39;height&＃39;: parseInt(el.offsetHeight + el.vml[z].size_offset.height)
}
if (el.vml[z].offsetWidth != new_size.width) { el.vml[z].style.width = new_size.width +&＃39;px&＃39;; }
if (el.vml[z].offsetHeight != new_size.height) { el.vml[z].style.height = new_size.height +&＃39;px&＃39;; }
}
}
if (event && (event.type == &＃39;resize&＃39;) && typeof(window.ieCSS3.previous_onresize) == &＃39;function&＃39;) { window.ieCSS3.previous_onresize(); }
}
// added by emptyhua@gmail.com 2010 7-3
window.update_css3_fix_position = updatePositionAndSize;
window.update_css3_fix = function(el)
{
if (!el.vml) return;
el.arcSize = Math.min(el.borderRadius / Math.min(el.offsetWidth, el.offsetHeight), 1);
// Find which element provides position:relative for the target element (default to BODY)
var vml_parent = el;
var limit = 100, i = 0;
do {
vml_parent = vml_parent.parentElement;
i++;
if (i >= limit) { return(false); }
} while ((typeof(vml_parent) != &＃39;undefined&＃39;) && (vml_parent.currentStyle.position != &＃39;relative&＃39;) && (vml_parent.tagName != &＃39;BODY&＃39;));
vml_parent.pos_ieCSS3 = findPos(vml_parent);
el.pos_ieCSS3 = findPos(el);
for (i in el.vml)
{
element.parentNode.removeChild(el.vml[i]);
}
el.vml = [];
var rv1 = createBoxShadow(el, vml_parent);
var rv2 = createBorderRect(el, vml_parent);
};
原文：https://www.cnblogs.com/BelieveWang/p/8027256.html
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有 
