css3.0搶先看(一)：border-radius圓角邊框

近來在國外的一些web學習網站上學習了些css3.0的新東東，組織了一下，打算分批寫下來。由於個人水平有限，難免有理解上的錯誤，歡迎大家指出我的錯誤。

     在css3中新增了很多功能和屬性，好多很酷很實用的功能。只是現在好多瀏覽器還都不支援，只有個別瀏覽器對某些屬性支援。現在開始介紹些有趣的吧。

    border-radius：用這個屬效能實現圓角邊框的效果。現在只有Mozilla/Firefox 和 Safari 3支援該屬性。請看下面的範例程式碼：

<div style=" background-color: #ccc;  -moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;" >

實現的效果如下:

 

Mozilla/Firefox 和 Safari 3使用者將在這裡看到圓角邊框

此外，設計者還可以隨意指定圓角的位置，左上、左下、右上、右下四個方向。在mozilla/firefox和safari中的具體書寫格式如下：

• -moz-border-radius-topleft / -webkit-border-top-left-radius
• -moz-border-radius-topright / -webkit-border-top-right-radius
• -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
• -moz-border-radius-bottomright / -webkit-border-bottom-right-radius

實現的效果如下：
      Mozilla/Firefox 和Safari 3 中看到的左上圓角Mozilla/Firefox 和Safari 3 中看到的右上圓角Mozilla/Firefox 和Safari 3 中看到的左下圓角Mozilla/Firefox 和Safari 3 中看到的右下圓角

好吧，終於寫完border-radius了，沒發貼的經驗，寫起來真費勁，呵呵。下回還寫和border有關的，具體的再說啦。