圓角矩形一向是設計師最傾心的一種設計，因為他們可以讓整個網頁生動起來，不那麼死板，所以，作為一個優秀的網頁設計師，學會一種或多種編輯圓角矩形的方法是必不可少的，而且圓角矩形應用範圍極廣，一個網頁內的所有矩形基本上都需要設計為圓角矩形，這樣網頁才不會那麼死氣沉沉！
工具/原料
一些簡潔、直觀、強悍的前端開發框架，如bootstrap
方法/步驟
我們先來看一下圓角矩形和普通矩形的區別。
雖然第二個是某知名搜索引擎，而且我天天要用，但是他的設計我還是想吐槽，直直的框真的很難看啊。。。=_=
相比來說，第一個就比較人性化，看得舒服。
圓角矩形可以用在輸入框中、導航欄中、相框上、彈出框上。總之，任何有矩形的地方都可以改成圓角矩形，也許只是小小的改動，但卻會讓你的網頁生機盎然！
看騰訊的註冊表單，全部是圓角的，如果是純矩形的話，會很醜！！
接下來看看全是矩形的表單
再看看同一張表單，把矩形換成圓角矩形會怎麼樣？
接下來就介紹第一種編輯圓角矩形的方法！
原理是四張圓角的圖片放在四個角上，就是圓角矩形的四個角，但這種方法只適合當做菜單欄背景，或是相框背景，輸入框的圓角不適合用，當然，這種方法對圖片要求比較高！！如果你切圖很好的話，這種方法可以用在一切圓角矩形上，缺點很明顯，即使圖片可以重複利用，也需要大量圖片。
優點：圖片可以自適應，技術簡單，只做網站主頁的話，圖片就可以大量重複利用，效果相當不錯。
第二種方法！
簡化第一種方法。將四個圖片變成兩個圖片，上下各一個。
缺點：還是需要圖片。而且自適應能力變差，左右不能自適應！！圖片需求比較高，需要很好的切圖技術！
優點：簡化第一種方法，圖片數量變小。技術簡單，容易操作，更改時只需要換圖片，效果就全換了！利用這種方法，建站後維護、更新很方便。
第三種方法！不用圖片，純css+div製作圓角矩形！！
而且對ie也支持！
原理是用8個高度、寬度很小的div塊放在上下四角，並且這些div塊相互並列，在最外面還有一個div塊作為邊框包含住這些小的div塊，這些小的div塊呈白色,其他背景、邊框呈黑色，這樣看起來矩形的四角就好像圓了。
這個方法非常實用，但是技術難度較高，需要對div+css較熟悉的人才能做到，在這裡貼上代碼！
代碼：
一些內容
第四種方法！效果十分好，只是對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專門設計一套圓角樣式（前三種方法）。
所以將這四種方法結合起來用才是最好的！
代碼如下：
一些內容
}
最後再次來看看效果圖吧！！
注意事項
所有的方法結合起來才是最好的！
第四種方法看起來很好，可是瀏覽器兼容性不好；但第一、二種看起來麻煩，瀏覽器兼容性非常好，實際上各有利弊，需要結合使用！！