<?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>The Princess Diaries &#187; border-radius</title>
	<atom:link href="http://onezhou.com/tag/border-radius/feed/" rel="self" type="application/rss+xml" />
	<link>http://onezhou.com</link>
	<description>熊家的公主</description>
	<lastBuildDate>Mon, 12 Sep 2011 22:55:07 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>css3之rounded corner</title>
		<link>http://onezhou.com/2009/06/css3-rounded-corner/</link>
		<comments>http://onezhou.com/2009/06/css3-rounded-corner/#comments</comments>
		<pubDate>Thu, 18 Jun 2009 11:48:31 +0000</pubDate>
		<dc:creator>Sue Zhou</dc:creator>
				<category><![CDATA[分享]]></category>
		<category><![CDATA[border-radius]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[rounded corner]]></category>

		<guid isPermaLink="false">http://onezhou.com/?p=433</guid>
		<description><![CDATA[IE8正式版的发布只是证明了IE家族里又出了一个鸡肋。身为浏览器大家庭里占一定比重的一员，居然对CSS3还是我行我素的不支持，似乎MS已经不再在乎其浏览器市场份额逐年下跌了。
WordPress的2.8正式版的后台更漂亮点了，用户交互更亲和，虽然在2.7的基础上视觉效果改变不多，升级后突然心血来潮的[......]<p class='read-more'><a href='http://onezhou.com/2009/06/css3-rounded-corner/'>阅读全文</a></p>]]></description>
			<content:encoded><![CDATA[<p>IE8正式版的发布只是证明了IE家族里又出了一个鸡肋。身为浏览器大家庭里占一定比重的一员，居然对CSS3还是我行我素的不支持，似乎MS已经不再在乎其浏览器市场份额逐年下跌了。</p>
<p>WordPress的2.8正式版的后台更漂亮点了，用户交互更亲和，虽然在2.7的基础上视觉效果改变不多，升级后突然心血来潮的去IE下看了看效果，发现IE下还是比较难看，虽然还是实现了按钮等rollover的渐变背景效果，但是圆角就彻底被放弃了，IE下效果就是方方正正的一个个模块。想想也许这也不失是一个解决办法──与其花费大把的时间去让不听话的IE漂亮一点，还不如对IE的界面采取另一种相似的设计，丑是丑了点，但是引用我们单位Dave当时说过的一句话 “<strong>People who choose IE does not deserve better design.</strong> ”</p>
<p>言归正传，本篇的重点是总结一下在各浏览器下圆角的实现方法。现在许多乖浏览器如Firefox, Safari, Opera已经支持CSS3中的某些语句，特别是border-radius这一创造圆句的功能，太赞了，一句CSS代码就解决了头疼的问题，使用方法如下：<br />
<strong>CSS3 (not yet finalised)</strong></p>
<pre><code>border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius
border-radius</code></pre>
<p><strong>Mozilla equivalent</strong></p>
<pre><code>-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft
-moz-border-radius-topleft
-moz-border-radius</code></pre>
<p><a href="http://onezhou.com/blog/wp-content/uploads/2009/06/moz-border-radius.gif" target="_blank"><img class="size-medium wp-image-436 alignnone" title="moz-border-radius" src="http://onezhou.com/blog/wp-content/uploads/2009/06/moz-border-radius-300x169.gif" alt="moz-border-radius" width="300" height="169" /></a></p>
<p><strong>WebKit equivalent</strong></p>
<pre><code>-webkit-border-top-right-radius
-webkit-border-bottom-right-radius
-webkit-border-bottom-left-radius
-webkit-border-top-left-radius
-webkit-border-radius</code></pre>
<p><a href="http://onezhou.com/blog/wp-content/uploads/2009/06/webkit-border-radius.gif"><img class="alignnone size-medium wp-image-437" title="webkit-border-radius" src="http://onezhou.com/blog/wp-content/uploads/2009/06/webkit-border-radius-300x180.gif" alt="webkit-border-radius" width="300" height="180" /></a></p>
<p><strong>Opera and KHTML browsers</strong></p>
<pre><code>-opera-border-radius
-khtml-border-radius</code></pre>
<p>由于IE家没有支持CSS3的，所以对于IE下的圆角要另外花功夫。主要用了CSS和png图片及container的嵌套（对IE6，由于其不支持png，各种hacker对png背景图片的处理也不是太理想，于是特别创建了一堆gif图片，不胜其烦），总结了一下代码如下：</p>
<p>（暂时不总结了，下回用到再说吧）</p>
<p>&#8212;&#8212;&#8212;</p>
<p>Reference: http://www.the-art-of-web.com/css/border-radius/</p>
]]></content:encoded>
			<wfw:commentRss>http://onezhou.com/2009/06/css3-rounded-corner/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

