Safari 3支援CSS 3

雖然Safari 3公開測試的結果不盡然理想，但，隨著iPhone的熱賣，幾項Safari 3的優勢逐漸受到重視，特別是在CSS的支援度上，Safari的表現確實搶眼。

所謂「有規矩，才能成方圓」，CSS3無疑是網頁設計的未來標準，雖然各種瀏覽器支援程度不一，往往造成designer的困擾，但，愈早瞭解甚至熟用這些未來標準，或許更有助於設計創意的發揮，比如說：

1. 多重背景圖（Multiple Background Images）

   #division9 {
   background:
   url("images/top-left.png") no-repeat top left,/*左上背景圖*/
   url("images/top-right.png") no-repeat top right,/*右上背景圖*/
   url("images/bottom-left.png") no-repeat bottom left,/*左下背景圖*/
   url("images/bottom-right.png") no-repeat bottom right,/*右下背景圖*/
   url("images/left.png") repeat-y left,/*左背景圖*/
   url("images/top.png") repeat-x top,/*上背景圖*/
   url("images/right.png") repeat-y right,/*右背景圖*/
   url("images/bottom.png") repeat-x bottom;/*下背景圖*/
   }

2. 圓角效果（Rounded Corners）

   #division9 {
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   /* -webkit-border-top-left-radius: 5px; */
   /* -webkit-border-top-right-radius: 5px; */
   /* -webkit-border-bottom-left-radius: 5px; */
   /* -webkit-border-bottom-right-radius: 5px; */
   border: 1px solid #ff5500;
   }

其中，FireFox已經支援圓角效果，但多重背景圖目前似乎只有Safari 3支援。過去我們習以為常的背景圖作法或圓角作法，在未來或許依然可行，但，如果你不曾把創意的限度推到邊界，就有可能喪失創造絕妙設計的機會。

Tags: Safari 3, CSS 3