首頁 > 開發者 > JavaScript
css 圓角，css
一、支援的瀏覽器
| 瀏覽器 | 支援性 |
|---|---|
| Firefox(2、3+) | √ |
| Google Chrome(1.0.154+…) | √ |
| Google Chrome(2.0.156+…) | √ |
| Safari(3.2.1+ windows) | √ |
| Internet Explorer(IE7, IE8) | × |
| Opera 9.6 | × |
二、用途及其優勢
傳統的圓角產生方案，必須使用多張圖片作為背景圖案。CSS3的出現，使得我們再也不必浪費時間去製作這些圖片了，而且還有其他多個優點：
* 減少維護的工作量。圖片檔案的產生、更新、編寫網頁代碼，這些工作都不再需要了。
* 提高網頁效能。由於不必再發出多餘的HTTP請求，網頁的載入速度將變快。
* 增加視覺可靠性。某些情況下（網路擁堵、伺服器出錯、網速過慢等等），背景圖片會下載失敗，導致視覺效果不佳。CSS3就不會發生這種情況。
三、實現
CSS3圓角只需設定一個屬性：border-radius（含義是"邊框半徑"）。你為這個屬性提供一個值，就能同時設定四個圓角的半徑。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等。
border-radius:50px;
這句是同時設定每個圓角的“水平半徑”和“垂直半徑”為50px；
1、實現圓角
<!DOCTYPE html><html><head> <title>css 圓角</title> <meta charset="utf-8"><style type="text/css">body{ margin: 0; padding: 0;}#test{ /*-moz-border-radius: 15px; -webkit-border-radius: 15px; */ border-radius:15px; border:1px solid #dedede; margin: 50px; width : 250px; height: 50px;}</style></head><body><div id="test"></div></body></html>
效果如下：
2、實現圓形
<!DOCTYPE html><html><head> <title>css 圓角</title> <meta charset="utf-8"><style type="text/css">body{ margin: 0; padding: 0;}#circle { width: 200px; height: 200px; background-color: #efefef; border: 3px #a72525 dashed; /*-webkit-border-radius: 100px 100px 100px 100px; -moz-border-radius: 100px 100px 100px 100px;*/border-radius: 100px;} </style></head><body><div id="circle"></div></body></html>
效果如下：
四、不同圓角半徑實現
1、方式一
border-radius屬性支援四個角使用不同的弧度。可以直接給出4個弧度，如下：
border-radius:10px 20px 30px 40px;
依次是左上、右上、右下、左下的圓角半徑。即左上方的圓角半徑是10px，右上方的圓角半徑是20px，右下角的圓角半徑是30px，左下角的圓角半徑是40px。
<!DOCTYPE html><html><head> <title>css 圓角</title> <meta charset="utf-8"><style type="text/css">body{ margin: 0; padding: 0;}#test{ border-radius:10px 20px 30px 40px; border:1px solid #dedede; margin: 50px; width : 250px; height: 50px;}</style></head><body><div id="test"></div></body></html>
效果如下：
2、方式2
除了同時設定四個圓角以外，還可以單獨對每個角進行設定。對應四個角，CSS3提供四個單獨的屬性：
* border-top-left-radius
* border-top-right-radius
* border-bottom-right-radius
* border-bottom-left-radius
這四個屬性都可以同時設定1到2個值。如果設定1個值，表示水平半徑與垂直半徑相等。如果設定2個值，第一個值表示水平半徑，第二個值表示垂直半徑。
<!DOCTYPE html><html><head> <title>css 圓角</title> <meta charset="utf-8"><style type="text/css">body{ margin: 0; padding: 0;}#test{ border-top-left-radius: 20px 40px; border:1px solid #dedede; margin: 50px; width : 250px; height: 50px;}</style></head><body><div id="test"></div></body></html>
效果如下：
注意：
早期版本的Safari和Chrome，支援-webkit-border-radius屬性，早期版本的Firefox支援-moz-border-radius屬性。
目前來看，為了保證相容性，只需同時設定-moz-border-radius和border-radius即可。
-moz-border-radius: 15px;
border-radius: 15px; （border-radius 必須放在上面三個的最後，否則可能會失效）
源碼：http://pan.baidu.com/s/1c0LRI4g
致謝：感謝您的閱讀！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
