
			<p>讲到css3的border-radius这个玩意，可以很好玩。比如：圆角矩形，圆，椭圆等等。</p>
<h2>CSS3 border-radius是什么？</h2>
<p>border-radius的含义是：圆角。</p>
<h2>CSS3 border-radius的书写格式：</h2>
<p>border-radius:<strong>a</strong>px，比较常见，其中<strong>a</strong>表示数值，下同；</p>
<p>-webkit-border-top-left-radius:<strong>a</strong>px，类似这种的写法还是很实用的，但一定要记住顺序，一句话：<strong>先写Y轴，再写X轴</strong>。</p>
<p><strong>注意：</strong>上诉的-webkit-是兼容webkit内核的写法，-moz-内核的写法有所不同，如：-moz-border-radius-topleft:<strong>a</strong>px</p>
<p>下面我们通过几个实例演示说明border-radius的用法：</p>
<h3>CSS3 border-radius 圆角矩形：</h3>
<blockquote>
<p id="_mcePaste"><span style="color: #666666; font-family: monospace; line-height: normal;"><span class="css-select-op">.</span><span class="css-selector" style="color: #1111bb;">demo01</span><span class="css-punctuation">{</span><br />
<span class="css-identifier" style="color: black;"> -webkit-border-radius</span><span class="css-punctuation">:</span><span class="css-unit" style="color: #228811;">10px</span><span class="css-punctuation">;</span><br />
<span class="whitespace"> </span><span class="css-identifier" style="color: black;"> -moz-border-radius</span><span class="css-punctuation">:</span><span class="css-unit" style="color: #228811;">10px</span><span class="css-punctuation">;</span><br />
<span class="css-punctuation">}</span></span></p>
</blockquote>
<h3>CSS3 border-radius 圆角矩形2：</h3>
<blockquote><p><span style="color: #666666; font-family: monospace; line-height: normal;"><span class="css-select-op">.</span><span class="css-selector" style="color: #1111bb;">demo02</span><span class="css-punctuation">{</span><br />
<span class="css-identifier" style="color: black;"> -webkit-border-radius</span><span class="css-punctuation">:</span><span class="css-unit" style="color: #228811;">36px</span><span class="css-punctuation">;</span><br />
<span class="css-identifier" style="color: black;"> -moz-border-radius</span><span class="css-punctuation">:</span><span class="css-unit" style="color: #228811;">36px</span><span class="css-punctuation">;</span><br />
<span class="css-punctuation">}</span></span></p></blockquote>
<h3>CSS3 border-radius 圆：</h3>
<blockquote><p><span style="color: #666666; font-family: monospace; line-height: normal;"><span class="css-select-op">.</span><span class="css-selector" style="color: #1111bb;">demo03</span><span class="css-punctuation">{</span><br />
<span class="css-identifier" style="color: black;"> height</span><span class="css-punctuation">:</span><span class="css-unit" style="color: #228811;">300px</span><span class="css-punctuation">;</span><br />
<span class="css-identifier" style="color: black;"> line-height</span><span class="css-punctuation">:</span><span class="css-unit" style="color: #228811;">300px</span><span class="css-punctuation">;</span><br />
<span class="css-identifier" style="color: black;"> -webkit-border-radius</span><span class="css-punctuation">:</span><span class="css-unit" style="color: #228811;">300px</span><span class="css-punctuation">;</span><br />
<span class="css-identifier" style="color: black;"> -moz-border-radius</span><span class="css-punctuation">:</span><span class="css-unit" style="color: #228811;">300px</span><span class="css-punctuation">;</span><br />
<span class="css-punctuation">}</span></span></p></blockquote>
<h3>CSS3 border-radius 漂亮圆角：</h3>
<blockquote><p><span style="color: #666666; font-family: monospace; line-height: normal;"><span class="css-select-op">.</span><span class="css-selector" style="color: #1111bb;">demo04</span><span class="css-punctuation">{</span><br />
<span class="css-identifier" style="color: black;"> -webkit-border-top-left-radius</span><span class="css-punctuation">:</span><span class="css-unit" style="color: #228811;">20px</span><span class="css-punctuation">;</span><br />
<span class="css-identifier" style="color: black;"> -webkit-border-bottom-right-radius</span><span class="css-punctuation">:</span><span class="css-unit" style="color: #228811;">20px</span><span class="css-punctuation">;</span><br />
<span class="css-identifier" style="color: black;"> -moz-border-radius-topleft</span><span class="css-punctuation">:</span><span class="css-unit" style="color: #228811;">20px</span><span class="css-punctuation">;</span><br />
<span class="css-identifier" style="color: black;"> -moz-border-radius-bottomright</span><span class="css-punctuation">:</span><span class="css-unit" style="color: #228811;">20px</span><span class="css-punctuation">;</span><br />
<span class="css-punctuation">}</span></span></p></blockquote>
<h3>CSS3 border-radius 椭圆：</h3>
<blockquote><p><span style="color: #666666; font-family: monospace; line-height: normal;"><span class="css-select-op">.</span><span class="css-selector" style="color: #1111bb;">demo05</span><span class="css-punctuation">{</span><br />
<span class="css-identifier" style="color: black;"> height</span><span class="css-punctuation">:</span><span class="css-unit" style="color: #228811;">300px</span><span class="css-punctuation">;</span><br />
<span class="css-identifier" style="color: black;"> -webkit-border-radius</span><span class="css-punctuation">:</span><span class="css-unit" style="color: #228811;">180px</span><span class="css-punctuation">;</span><br />
<span class="css-identifier" style="color: black;"> -webkit-transform</span><span class="css-punctuation">:</span><span class="css-value" style="color: #770088;">rotatex</span><span class="css-value" style="color: #770088;">(60deg</span><span class="css-value" style="color: #770088;">)</span><span class="css-punctuation">;</span><br />
<span class="css-punctuation">}</span></span></p></blockquote>
<p>能做的事情很多，更多技巧靠你发掘啦！</p>
<p>转载请注明：<a href="http://www.daqianduan.com">大前端</a> &raquo; <a href="http://www.daqianduan.com/css3-border-radius/">CSS3详解：border-radius</a></p>		