簡潔型css圓角矩形
3d圓角矩形:
css3實現圓角
firefox 和 safari 實現圓角
1.css3是樣式表（style sheet）語言的最新版本，它的一大優點就是支援圓角
1）css3圓角的優點
* 減少維護的工作量。檔案的生成、更新、編寫網頁**，這些工作都不再需要了。
* 提高網頁效能。由於不必再發出多餘的http請求，網頁的載入速度將變快。
2）border-radius屬性
css3圓角只需設定乙個屬性：border-radius（含義是"邊框半徑"）。你為這個屬性提供乙個值，就能同時設定四個圓角的半徑。所有合法的css度量值都可以使用：em、ex、pt、px、百分比等等。
css3圓角只需設定乙個屬性：border-radius（含義是"邊框半徑"）。你為這個屬性提供乙個值，就能同時設定四個圓角的半徑。所有合法的css度量值都可以使用：em、ex、pt、px、百分比等等。
比如，下面是乙個div方框：
現在設定它的圓角半徑為15px：
這條語句同時將每個圓角的"水平半徑"（horizontal radius）和"垂直半徑"（vertical radius）都設定為15px。
border-radius可以同時設定1到4個值。如果設定1個值，表示4個圓角都使用這個值。如果設定兩個值，表示左上角和右下角使用第乙個值，右上角和左下角使用第二個值。如果設定三個值，表示左上角使用第乙個值，右上角和左下角使用第二個值，右下角使用第三個值。如果設定四個值，則依次對應左上角、右上角、右下角、左下角（順時針順序）。
（左下角的半徑為0，就變成直角了。）
border-radius還可以用斜槓設定第二組值。這時，第一組值表示水平半徑，第二組值表示垂直半徑。第二組值也可以同時設定1到4個值，應用規則與第一組值相同。
三、單個圓角的設定
除了同時設定四個圓角以外，還可以單獨對每個角進行設定。對應四個角，css3提供四個單獨的屬性：
* border-top-left-radius
* border-top-right-radius
* border-bottom-right-radius
* border-bottom-left-radius
這四個屬性都可以同時設定1到2個值。如果設定1個值，表示水平半徑與垂直半徑相等。如果設定2個值，第乙個值表示水平半徑，第二個值表示垂直半徑。
四、瀏覽器支援
ie 9、opera 10.5、safari 5、chrome 4和firefox 4，都支援上述的border-radius屬性。早期版本的safari和chrome，支援-webkit-border-radius屬性，早期版本的firefox支援-moz-border-radius屬性。
目前來看，為了保證相容性，只需同時設定-moz-border-radius和border-radius即可。
-moz-border-radius: 15px;
border-radius: 15px;
（注意：border-radius必須放在最後宣告，否則可能會失效。）
另外，早期版本firefox的單個圓角的語句，與標準語法略有不同。
* -moz-border-radius-topleft（標準語法：border-top-left-radius）
* -moz-border-radius-topright（標準語法：border-top-right-radius）
* -moz-border-radius-bottomleft（標準語法：border-bottom-left-radius）
* -moz-border-radius-bottomright（標準語法：border-bottom-right-radius）
五、注意事項
雖然各大瀏覽器都支援border-radius，但是在某些細節上，實現都不一樣。當四個角的顏色、寬度、風格（實線框、虛線框等）、單位都相同時，所有瀏覽器的渲染結果基本一致；一旦四個角的設定不相同，就會出現很大的差異。比如，下面這段**在不同的瀏覽器中，渲染結果就相差很大。
border-color: black;
border-style: solid dashed;
border-width: 1px 2px 3px;
border-top-color: red;
border-radius: 5%;
另外，並非所有瀏覽器，都支援將圓角半徑設為乙個百分比值。
因此，目前最安全的做法，就是將每個圓角邊框的風格和寬度，都設為一樣的值，並且避免使用百分比值
div css用邊框實現圓角矩形 多樣式
簡潔型css圓角 方法1 簡潔型css圓角矩形 code1 複製 如下 簡潔型css圓角矩形 方法2 無實現圓角框 code2 複製 如下 無實現圓角框 3d圓角矩形 code 複製 如下 反向css圓角矩形 code 複製 如下 反向css圓角矩形 略帶菱形的css圓角 code 複製 如下 wu...
5 邊框 1 1 1 邊框圓角
border radius 圓角處理時，腦中要形成圓 圓心 橫軸 縱軸的概念，正圓是橢圓的一種特殊情況。如下圖 為了方便表述，我們將四個角標記成1 2 3 4，如2代表右上角，css裡提供了border radius來設定這些角橫縱軸半徑值。支援簡寫模式，具體如下 1 border radius 1...
border radius 圓角邊框
在css3.0中，又新增了乙個新的屬性border radius，使用border radius這個屬性可以實現圓角邊框的效果。除ie和遨遊外，目前有firefox safari，chrome，opera支援該屬性，其safari，chrome，opera是支援最好的，依照了w3c的標準，僅僅使用b...