<?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>老TC的茅屋 &#187; CSS</title>
	<atom:link href="http://old.tc/blog/tag/css/feed/" rel="self" type="application/rss+xml" />
	<link>http://old.tc</link>
	<description>经常幻想自己是个爆眼子老头儿,爱主动和老太婆搭腔,大娘们偶尔赏脸把眉毛鼻子挤在一块对我眯眯笑,更多时候不赏脸只赏耳光。</description>
	<lastBuildDate>Fri, 09 Jul 2010 12:31:36 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<xhtml:meta xmlns:xhtml="http://www.w3.org/1999/xhtml" name="robots" content="noindex" />
		<item>
		<title>用CSS做圆角</title>
		<link>http://old.tc/blog/css-radius/</link>
		<comments>http://old.tc/blog/css-radius/#comments</comments>
		<pubDate>Tue, 11 Nov 2008 08:18:23 +0000</pubDate>
		<dc:creator>TC</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[浏览器]]></category>

		<guid isPermaLink="false">http://imtony.net/?p=577</guid>
		<description><![CDATA[圆角效果经常被运用到页面设计上，而前端实现圆角却始终是个不大不小的难题。如想达到大多数浏览器兼容，尤其是对IE的兼容，通常需要用到图片或多个box来模拟，增加冗余代码不说，也确实是个不太简单的事情。

曾经考虑用javascript封装函数，在页面加载时触发事件，自动生成各种各样的box来模拟圆角效果，从开发的角度一劳永逸。但事实往往不尽如人意，这样做当遇到圆角+边框的效果，会有很多麻烦的兼容性问题。

其实衡量后发现要达到圆角效果并不难，只是要兼容IE浏览器会很麻烦。综合考虑仅仅为了IE而增加大量冗余代码来实现圆角这么简单的效果，实在是得不偿失的，因此考虑放弃对IE的兼容。

<span class="readmore"><a href="http://old.tc/blog/css-radius/" title="用CSS做圆角">阅读全文——共669字</a></span>


其它你可能感兴趣的文章:<ul><li><a href='http://old.tc/blog/choose-browser/' rel='bookmark' title='Permanent Link: 我该选用什么浏览器？'>我该选用什么浏览器？</a></li>
<li><a href='http://old.tc/blog/nik-ainley-visual/' rel='bookmark' title='Permanent Link: Nik Ainley 视觉艺术'>Nik Ainley 视觉艺术</a></li>
</ul>]]></description>
			<content:encoded><![CDATA[<p><img class="pie-img alignleft" src="http://imtony.net/wp-content/uploads/2008/11/radius.gif" width="276" height="279" />圆角效果经常被运用到页面设计上，而前端实现圆角却始终是个不大不小的难题。如想达到大多数浏览器兼容，尤其是对IE的兼容，通常需要用到图片或多个box来模拟，增加冗余代码不说，也确实是个不太简单的事情。</p>
<p>曾经考虑用javascript封装函数，在页面加载时触发事件，自动生成各种各样的box来模拟圆角效果，从开发的角度一劳永逸。但事实往往不尽如人意，这样做当遇到圆角+边框的效果，会有很多麻烦的兼容性问题。</p>
<p>其实衡量后发现要达到圆角效果并不难，只是要兼容IE浏览器会很麻烦。综合考虑仅仅为了IE而增加大量冗余代码来实现圆角这么简单的效果，实在是得不偿失的，因此考虑放弃对IE的兼容。<br />
<span id="more-577"></span></p>
<p>这样的话CSS3已经有默认属性支持容器的圆角<br />
<code>border-radius: 5px; /*自定义圆角半径*/</code></p>
<p>只是CSS3目前还没发布，绝大部分浏览器都不支持，但以Firefox为首的标准浏览器已经在自己的内核中加入了对圆角的解析，包括khtml和webkit内核的浏览器也均有自己的专有属性。如不考虑对垃圾IE的兼容，可以用以下CSS代码方便实现圆角，完全兼容firefox内核浏览器以及khtml和webkit内核（例如google chrome, safari等）的浏览器。<br />
<code>-moz-border-radius: 5px;<br />
-khtml-border-radius: 5px;<br />
-webkit-border-radius: 5px;<br />
border-radius: 5px;</code><br />
很可惜目前IE并没有类似的专有属性，IE8的beta2也并没有支持CSS3，但愿IE8的正式版发布后会有所改进。</p>
<a href="http://www.addtoany.com/add_to/google_reader?linkurl=http%3A%2F%2Fold.tc%2Fblog%2Fcss-radius%2F&amp;linkname=%E7%94%A8CSS%E5%81%9A%E5%9C%86%E8%A7%92" title="Google Reader" rel="nofollow" target="_blank"><img src="http://old.tc/wp-content/plugins/add-to-any/icons/reader.png" width="16" height="16" alt="Google Reader"/></a> <a href="http://www.addtoany.com/add_to/twitter?linkurl=http%3A%2F%2Fold.tc%2Fblog%2Fcss-radius%2F&amp;linkname=%E7%94%A8CSS%E5%81%9A%E5%9C%86%E8%A7%92" title="Twitter" rel="nofollow" target="_blank"><img src="http://old.tc/wp-content/plugins/add-to-any/icons/twitter.png" width="16" height="16" alt="Twitter"/></a> <a href="http://www.addtoany.com/add_to/delicious?linkurl=http%3A%2F%2Fold.tc%2Fblog%2Fcss-radius%2F&amp;linkname=%E7%94%A8CSS%E5%81%9A%E5%9C%86%E8%A7%92" title="Delicious" rel="nofollow" target="_blank"><img src="http://old.tc/wp-content/plugins/add-to-any/icons/delicious.png" width="16" height="16" alt="Delicious"/></a> <a href="http://www.addtoany.com/add_to/digg?linkurl=http%3A%2F%2Fold.tc%2Fblog%2Fcss-radius%2F&amp;linkname=%E7%94%A8CSS%E5%81%9A%E5%9C%86%E8%A7%92" title="Digg" rel="nofollow" target="_blank"><img src="http://old.tc/wp-content/plugins/add-to-any/icons/digg.png" width="16" height="16" alt="Digg"/></a> <a href="http://www.addtoany.com/add_to/facebook?linkurl=http%3A%2F%2Fold.tc%2Fblog%2Fcss-radius%2F&amp;linkname=%E7%94%A8CSS%E5%81%9A%E5%9C%86%E8%A7%92" title="Facebook" rel="nofollow" target="_blank"><img src="http://old.tc/wp-content/plugins/add-to-any/icons/facebook.png" width="16" height="16" alt="Facebook"/></a> <a href="http://www.addtoany.com/add_to/myspace?linkurl=http%3A%2F%2Fold.tc%2Fblog%2Fcss-radius%2F&amp;linkname=%E7%94%A8CSS%E5%81%9A%E5%9C%86%E8%A7%92" title="MySpace" rel="nofollow" target="_blank"><img src="http://old.tc/wp-content/plugins/add-to-any/icons/myspace.png" width="16" height="16" alt="MySpace"/></a> <a href="http://www.addtoany.com/add_to/friendfeed?linkurl=http%3A%2F%2Fold.tc%2Fblog%2Fcss-radius%2F&amp;linkname=%E7%94%A8CSS%E5%81%9A%E5%9C%86%E8%A7%92" title="FriendFeed" rel="nofollow" target="_blank"><img src="http://old.tc/wp-content/plugins/add-to-any/icons/friendfeed.png" width="16" height="16" alt="FriendFeed"/></a> <a href="http://www.addtoany.com/add_to/wordpress?linkurl=http%3A%2F%2Fold.tc%2Fblog%2Fcss-radius%2F&amp;linkname=%E7%94%A8CSS%E5%81%9A%E5%9C%86%E8%A7%92" title="WordPress" rel="nofollow" target="_blank"><img src="http://old.tc/wp-content/plugins/add-to-any/icons/wordpress.png" width="16" height="16" alt="WordPress"/></a> <a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save?linkurl=http%3A%2F%2Fold.tc%2Fblog%2Fcss-radius%2F&amp;linkname=%E7%94%A8CSS%E5%81%9A%E5%9C%86%E8%A7%92" target="_blank">更多&raquo;</a>

<p>其它你可能感兴趣的文章:<ul><li><a href='http://old.tc/blog/choose-browser/' rel='bookmark' title='Permanent Link: 我该选用什么浏览器？'>我该选用什么浏览器？</a></li>
<li><a href='http://old.tc/blog/nik-ainley-visual/' rel='bookmark' title='Permanent Link: Nik Ainley 视觉艺术'>Nik Ainley 视觉艺术</a></li>
</ul></p>]]></content:encoded>
			<wfw:commentRss>http://old.tc/blog/css-radius/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
	</channel>
</rss>
