Safari 3支援CSS 3

作者: Jas / 發表於 2007-07-23

雖然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支援。過去我們習以為常的背景圖作法或圓角作法,在未來或許依然可行,但,如果你不曾把創意的限度推到邊界,就有可能喪失創造絕妙設計的機會。

technorati tag




回上方