圓角矩形一向是設計師最傾心的一種設計，因為他們可以讓整個網頁生動起來，不那么死板，所以，作為一個優秀的網頁設計師，學會一種或多種編輯圓角矩形的方法是必不可少的，而且圓角矩形應用范圍極廣，一個網頁內的所有矩形基本上都需要設計為圓角矩形，這樣網頁才不會那么死氣沉沉！
方法/步驟
-
我們先來看一下圓角矩形和普通矩形的區別。
雖然第二個是某知名搜索引擎，而且我天天要用，但是他的設計我還是想吐槽，直直的框真的很難看啊。。。=_=
相比來說，第一個就比較人性化，看得舒服。
-
圓角矩形可以用在輸入框中、導航欄中、相框上、彈出框上。總之，任何有矩形的地方都可以改成圓角矩形，也許只是小小的改動，但卻會讓你的網頁生機盎然！
看騰訊的注冊表單，全部是圓角的，如果是純矩形的話，會很丑！！
-
接下來看看全是矩形的表單
-
再看看同一張表單，把矩形換成圓角矩形會怎么樣？
-
接下來就介紹第一種編輯圓角矩形的方法！
原理是四張圓角的圖片放在四個角上，就是圓角矩形的四個角，但這種方法只適合當做菜單欄背景，或是相框背景，輸入框的圓角不適合用，當然，這種方法對圖片要求比較高！！如果你切圖很好的話，這種方法可以用在一切圓角矩形上，缺點很明顯，即使圖片可以重復利用，也需要大量圖片。
優點：圖片可以自適應，技術簡單，只做網站主頁的話，圖片就可以大量重復利用，效果相當不錯。
-
第二種方法！
簡化第一種方法。將四個圖片變成兩個圖片，上下各一個。
缺點：還是需要圖片。而且自適應能力變差，左右不能自適應！！圖片需求比較高，需要很好的切圖技術！
優點：簡化第一種方法，圖片數量變小。技術簡單，容易操作，更改時只需要換圖片，效果就全換了！利用這種方法，建站后維護、更新很方便。
-
第三種方法！不用圖片，純css+div制作圓角矩形！！
而且對ie也支持！
原理是用8個高度、寬度很小的div塊放在上下四角，並且這些div塊相互並列，在最外面還有一個div塊作為邊框包含住這些小的div塊，這些小的div塊呈白色,其他背景、邊框呈黑色，這樣看起來矩形的四角就好像圓了。
這個方法非常實用，但是技術難度較高，需要對div+css較熟悉的人才能做到，在這里貼上代碼！
-
代碼：
<style>
#mid{ margin:0px 20px; background:#000; font-size:20px;}
div.rtop{ display:block; background:#fff;}
div.rtop div { display:block; height:1px; overflow:hidden; background:#000;}
div.r1{ margin:0 3px;}
div.r2{ margin:0 2px;}
div.r3{ margin:0 1px;}
div.rtop div.r4 { margin:0 1px; height:1px;}
</style>
</head>
<body>
<div id="mid">
<div class="rtop">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
<div class="r4"></div>
</div>
一些內容
<div class="rtop">
<div class="r4"></div>
<div class="r3"></div>
<div class="r2"></div>
<div class="r1"></div>
</div>
<!-- 由8個div放在上上下四角做成的圓角矩形。注意div順序！！ -->
</div>
-
第四種方法！效果十分好，只是對ie瀏覽器不兼容。也是純css+div制作圓角矩形，不需要圖片。
顏色漸變是谷歌的一個屬性，Firefox也支持，但與圓角無關，就不再敘述。
原理：谷歌瀏覽器支持一種屬性：-webkit-border-radius、-moz-border-radius。
-webkit-border-radius：蘋果、谷歌等一些瀏覽器有，因為他們都用的是webkit內核。webkit內核瀏覽器都支持此屬性。-moz-border-radius：moz這個屬性主要專門支持Firefox瀏覽器的CSS屬性。這種方法可以設置任何矩形變成圓角矩形！
比如bootstrap的輸入框、按鈕、導航菜單的圓角效果，都是這樣做成的！
但缺點很明顯：在IE下不能用，這就需要設計者進行CSS HACK，為IE專門設計一套圓角樣式（前三種方法）。
所以將這四種方法結合起來用才是最好的！
-
代碼如下：
<style type='text/css'>
div{
text-align: center;
font-size: 32px;
width: 500px;
color: white;
padding: 10px;
margin: 10px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
}
</style>
<body>
<div>
一些內容
</div>
</body>
}
-
最后再次來看看效果圖吧！！
END