<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>浮山狼de博客 &#187; css-circle</title>
	<atom:link href="https://www.fushanlang.com/tag/css-circle/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.fushanlang.com</link>
	<description>next station - 下一站，活在当下，且行且思</description>
	<lastBuildDate>Sat, 29 Nov 2014 15:14:11 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=4.2.5</generator>
	<item>
		<title>CSS3圆角在IE,Firefox,Chrome,Safari的实现</title>
		<link>https://www.fushanlang.com/css3-rounded-property-firefox-chrome-safaris-implementation-1889/</link>
		<comments>https://www.fushanlang.com/css3-rounded-property-firefox-chrome-safaris-implementation-1889/#comments</comments>
		<pubDate>Tue, 31 May 2011 03:28:46 +0000</pubDate>
		<dc:creator><![CDATA[fushanlang]]></dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[css-circle]]></category>

		<guid isPermaLink="false">http://www.fushanlang.com/blog/?p=1889</guid>
		<description><![CDATA[ <p>&#160;</p> <p>Firefox的圆角属性：</p> <p>如果你想设置四个角都是一样圆角的话，可以像这样子直接设置-moz-border-radius:5px; 也可以单独设置元素的上左、上右、下右、下左四个角的值，分别用</p> -moz-border-radius-topleft -moz-border- radius-topright -moz-border-radius-bottomright -moz-border-radius- bottomleft <p>来设置。 也可以用合并起来一起设置如:-moz-border-radius:5px 0 5px 0;</p> <p>对chrome、Safari这两个webkit内核的浏览器来说，是用-webkit-border-radius来实现的。</p> <p>如果你想设置四个角都是一样圆角的话，依然可以像这样子直接设置-moz-border-radius:3px;</p> <p>如果是单独设置四个角的话，需要采取这种方式</p> -webkit-border-top-left-radius:5px 10px; -webkit-border-top-right-radius:5px 10px; -webkit-border-bottom-right-radius:5px 10px; -webkit-border-bottom-left-radius:5px 10px; <p>如果是要合并的话，只支持-webkit-border-radius:3px;或者是这样子-webkit-border-radius:3px 4px;使用-webkit-border-radius:5px 0 5px 0;将不会有任何效果。</p> <p>对于IE浏览器，由于对CSS3支持欠佳，可以考虑加入behavior属性。 </p> <p>不同浏览器下的综合一下可以这样写：</p> -moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; behavior: url(ie-circle-css3.htc); <p>如果要圆角效果，外加圆角背景的话可以借助border设置：</p> border-width:10px; border-color:#000; border-style:solid; <p>中间引入的ie-circle-css3.htc 内容如下：</p> // = limit) <span style="color:#777"> . . . &#8594; Read More: <a href="https://www.fushanlang.com/css3-rounded-property-firefox-chrome-safaris-implementation-1889/">CSS3圆角在IE,Firefox,Chrome,Safari的实现</a></span>]]></description>
				<content:encoded><![CDATA[<h2></h2>
<p>&nbsp;</p>
<p><strong>Firefox的圆角属性：</strong></p>
<p>如果你想设置四个角都是一样圆角的话，可以像这样子直接设置-moz-border-radius:5px;<br />
也可以单独设置元素的上左、上右、下右、下左四个角的值，分别用</p>
<pre class="css" name="code">
-moz-border-radius-topleft
-moz-border- radius-topright
-moz-border-radius-bottomright
-moz-border-radius- bottomleft</pre>
<p>来设置。<br />
也可以用合并起来一起设置如:-moz-border-radius:5px 0 5px 0;</p>
<p><strong>对chrome、Safari这两个webkit内核的浏览器来说，是用-webkit-border-radius来实现的。</strong></p>
<p><strong></strong>如果你想设置四个角都是一样圆角的话，依然可以像这样子直接设置-moz-border-radius:3px;</p>
<p>如果是单独设置四个角的话，需要采取这种方式</p>
<pre class="css" name="code">-webkit-border-top-left-radius:5px 10px;
-webkit-border-top-right-radius:5px 10px;
-webkit-border-bottom-right-radius:5px 10px;
-webkit-border-bottom-left-radius:5px 10px;</pre>
<p>如果是要合并的话，只支持-webkit-border-radius:3px;或者是这样子-webkit-border-radius:3px 4px;<strong>使用-webkit-border-radius:5px 0 5px 0;将不会有任何效果。</strong></p>
<p><strong>对于IE浏览器</strong>，由于对CSS3支持欠佳，可以考虑加入behavior属性。<br />
<strong></strong></p>
<p><strong>不同浏览器下的综合一下可以这样写：</strong></p>
<pre class="css" name="code">
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
behavior: url(ie-circle-css3.htc);</pre>
<p>如果要圆角效果，外加圆角背景的话可以借助border设置：</p>
<pre class="css" name="code">
border-width:10px;
border-color:#000;
border-style:solid;
</pre>
<p>中间引入的ie-circle-css3.htc 内容如下：</p>
<pre class="javascript" name="code"><script type="text/javascript">// <![CDATA[
timer_length = 200; // Milliseconds
border_opacity = false; // Use opacity on borders of rounded-corner elements? Note: This causes antialiasing issues

// supportsVml() borrowed from http://stackoverflow.com/questions/654112/how-do-you-detect-support-for-vml-or-svg-in-a-browser
function supportsVml() {
	if (typeof supportsVml.supported == "undefined") {
		var a = document.body.appendChild(document.createElement('div'));
		a.innerHTML = '<v:shape id="vml_flag1" adj="1" />';
		var b = a.firstChild;
		b.style.behavior = "url(#default#VML)";
		supportsVml.supported = b ? typeof b.adj == "object": true;
		a.parentNode.removeChild(a);
	}
	return supportsVml.supported
}

// 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 createBoxShadow(element, vml_parent) {
	var style = element.currentStyle['iecss3-box-shadow'] || element.currentStyle['-moz-box-shadow'] || element.currentStyle['-webkit-box-shadow'] || element.currentStyle['box-shadow'] || '';
	var match = style.match(/^(\d+)px (\d+)px (\d+)px/);
	if (!match) { return(false); }

	var shadow = document.createElement('v:roundrect');
	shadow.userAttrs = {
		'x': parseInt(RegExp.$1 || 0),
		'y': parseInt(RegExp.$2 || 0),
		'radius': parseInt(RegExp.$3 || 0) / 2
	};
	shadow.position_offset = {
		'y': (0 - vml_parent.pos_ieCSS3.y - shadow.userAttrs.radius + shadow.userAttrs.y),
		'x': (0 - vml_parent.pos_ieCSS3.x - shadow.userAttrs.radius + shadow.userAttrs.x)
	};
	shadow.size_offset = {
		'width': 0,
		'height': 0
	};
	shadow.arcsize = element.arcSize +'px';
	shadow.style.display = 'block';
	shadow.style.position = 'absolute';
	shadow.style.top = (element.pos_ieCSS3.y + shadow.position_offset.y) +'px';
	shadow.style.left = (element.pos_ieCSS3.x + shadow.position_offset.x) +'px';
	shadow.style.width = element.offsetWidth +'px';
	shadow.style.height = element.offsetHeight +'px';
	shadow.style.antialias = true;
	shadow.className = 'vml_box_shadow';
	shadow.style.zIndex = element.zIndex - 1;
	shadow.style.filter = 'progid:DXImageTransform.Microsoft.Blur(pixelRadius='+ shadow.userAttrs.radius +',makeShadow=true,shadowOpacity='+ element.opacity +')';

	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 = 'transparent';
	element.style.borderColor = 'transparent';

	var rect = document.createElement('v:roundrect');
	rect.position_offset = {
		'y': (0.5 * element.strokeWeight) - vml_parent.pos_ieCSS3.y,
		'x': (0.5 * element.strokeWeight) - vml_parent.pos_ieCSS3.x
	};
	rect.size_offset = {
		'width': 0 - element.strokeWeight,
		'height': 0 - element.strokeWeight
	};
	rect.arcsize = element.arcSize +'px';
	rect.strokeColor = element.strokeColor;
	rect.strokeWeight = element.strokeWeight +'px';
	rect.stroked = element.stroked;
	rect.className = 'vml_border_radius';
	rect.style.display = 'block';
	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';
	rect.style.width = (element.offsetWidth + rect.size_offset.width) +'px';
	rect.style.height = (element.offsetHeight + rect.size_offset.height) +'px';
	rect.style.antialias = true;
	rect.style.zIndex = element.zIndex - 1;

	if (border_opacity &#038;&#038; (element.opacity < 1)) { 		rect.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity='+ parseFloat(element.opacity * 100) +')'; 	} 	var fill = document.createElement('v:fill'); 	fill.color = element.fillColor; 	fill.src = element.fillSrc; 	fill.className = 'vml_border_radius_fill'; 	fill.type = 'tile'; 	fill.opacity = element.opacity; 	// Hack: IE6 doesn't support transparent borders, use padding to offset original element 	isIE6 = /msie|MSIE 6/.test(navigator.userAgent); 	if (isIE6 &#038;&#038; (element.strokeWeight > 0)) {
		element.style.borderStyle = 'none';
		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('span');
	var shadow = element.cloneNode(true);
	var radius = parseInt(RegExp.$3 || 0);
	shadow.userAttrs = {
		'x': parseInt(RegExp.$1 || 0) - (radius),
		'y': parseInt(RegExp.$2 || 0) - (radius),
		'radius': radius / 2,
		'color': (RegExp.$4 || '#000')
	};
	shadow.position_offset = {
		'y': (0 - vml_parent.pos_ieCSS3.y + shadow.userAttrs.y),
		'x': (0 - vml_parent.pos_ieCSS3.x + shadow.userAttrs.x)
	};
	shadow.size_offset = {
		'width': 0,
		'height': 0
	};
	shadow.style.color = shadow.userAttrs.color;
	shadow.style.position = 'absolute';
	shadow.style.top = (element.pos_ieCSS3.y + shadow.position_offset.y) +'px';
	shadow.style.left = (element.pos_ieCSS3.x + shadow.position_offset.x) +'px';
	shadow.style.antialias = true;
	shadow.style.behavior = null;
	shadow.className = 'ieCSS3_text_shadow';
	shadow.innerHTML = element.innerHTML;
	// For some reason it only looks right with opacity at 75%
	shadow.style.filter = '\
		progid:DXImageTransform.Microsoft.Alpha(Opacity=75)\
		progid:DXImageTransform.Microsoft.Blur(pixelRadius='+ shadow.userAttrs.radius +',makeShadow=false,shadowOpacity=100)\
	';

	var clone = element.cloneNode(true);
	clone.position_offset = {
		'y': (0 - vml_parent.pos_ieCSS3.y),
		'x': (0 - vml_parent.pos_ieCSS3.x)
	};
	clone.size_offset = {
		'width': 0,
		'height': 0
	};
	clone.style.behavior = null;
	clone.style.position = 'absolute';
	clone.style.top = (element.pos_ieCSS3.y + clone.position_offset.y) +'px';
	clone.style.left = (element.pos_ieCSS3.x + clone.position_offset.x) +'px';
	clone.className = 'ieCSS3_text_shadow';

	element.parentNode.appendChild(shadow);
	element.parentNode.appendChild(clone);

	element.style.visibility = 'hidden';

	// 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(' ', 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've run once before on this page
	if (typeof(window.ieCSS3) == 'undefined') {
		// Create global ieCSS3 object
		window.ieCSS3 = {
			'vmlified_elements': new Array(),
			'update_timer': setInterval(updatePositionAndSize, timer_length)
		};

		if (typeof(window.onresize) == 'function') { 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['iecss3-border-radius'] ||
	                             this.currentStyle['-moz-border-radius'] ||
	                             this.currentStyle['-webkit-border-radius'] ||
	                             this.currentStyle['border-radius'] ||
	                             this.currentStyle['-khtml-border-radius']);
	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\("(.+)"\)$/, '$1');
	this.strokeColor = this.currentStyle.borderColor;
	this.strokeWeight = parseInt(this.currentStyle.borderWidth);
	this.stroked = 'true';
	if (isNaN(this.strokeWeight) || (this.strokeWeight == 0)) {
		this.strokeWeight = 0;
		this.strokeColor = fillColor;
		this.stroked = 'false';
	}
	this.opacity = parseFloat(this.currentStyle.opacity || 1);
	this.textShadow = this.currentStyle['text-shadow'];

	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) != 'undefined') &#038;&#038; (vml_parent.currentStyle.position != 'relative') &#038;&#038; (vml_parent.tagName != 'BODY'));

	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) == 'undefined') {
		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) != 'object') { return(false); }

	for (var i in window.ieCSS3.vmlified_elements) {
		var el = window.ieCSS3.vmlified_elements[i];

		if (typeof(el.vml) != 'object') { 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) + 'px';
			new_pos.y = (new_pos.y + el.vml[z].position_offset.y) + 'px';
			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 = {
				'width': parseInt(el.offsetWidth + el.vml[z].size_offset.width),
				'height': 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 +'px'; }
			if (el.vml[z].offsetHeight != new_size.height) { el.vml[z].style.height = new_size.height +'px'; }
		}
	}

	if (event &#038;&#038; (event.type == 'resize') &#038;&#038; typeof(window.ieCSS3.previous_onresize) == 'function') { window.ieCSS3.previous_onresize(); }
}
// ]]&gt;</script></pre>
<p>&nbsp;</p>
]]></content:encoded>
			<wfw:commentRss>https://www.fushanlang.com/css3-rounded-property-firefox-chrome-safaris-implementation-1889/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
