池水間 - 用 CSS 3 將你的設計帶入下個高度 ::: 睡蓮‧池水間

子標題：用 CSS 3 將你的設計帶入下個高度 - 3

8)圓角（邊框半徑）

　　Border-radius 無需背景圖片就能給HTML元素添加圓角。現在，它可能是使用最多的 CSS 3 屬性了，很簡單的原因是使用圓角比較好而且不會對設計和可用性有衝突。

　　不同於添加 Javascript 或多於的 HTML 標籤，僅僅需要添加一些 CSS 屬性並從好的方面考慮。這個方案是清晰的和比較有效的，而且可以讓你免於花費幾個小時來尋找精巧的瀏覽器方案和基於 Javascript 圓角。

Sam Brown 的博客在標題、分類和鏈接處使用了 border-radius。

　　Sam Brown 在他的博客的標題、分類、鏈接和 div 中大量的使用了 border-radius 屬性。使用圖片來實現該效果將會比較費時的，這是在項目中使用 CSS 3 屬性是提高開發效率的重要步驟的原因之一。

　　為了給類別連接添加圓角，Sam 使用了下面的 CSS 片段：

 h2 span { 
	  color : #1a1a1a ; 
	  padding : .5em ; 
	  -webkit-border-radius : 6px ; 
	  -moz-border-radius : 6px ; 
	  }

　　我們可以做的更進一步，添加原始的 CSS 3 屬性和 Konqueror 屬性擴展，如下:

h2 span { 
      color : #1a1a1a ; 
      padding : .5em ; 
      -webkit-border-radius : 6px ; 
      -moz-border-radius : 6px ; 
      -khtml-border-radius : 6px ; 
      border-radius : 6px ; 
      }

如果我們想在我們的元素中的某個特定的角上應用此屬性，我們可以單獨的指定每個角：

div { 
      -moz-border-radius-topright : 6px ; 
      -moz-border-radius-topleft : 6px ; 
      -moz-border-radius-bottomright : 6px ; 
      -moz-border-radius-bottomleft : 6px ; 
      -webkit-border-top-right-radius : 6px ; 
      -webkit-border-top-left-radius : 6px ; 
      -webkit-border-bottom-right-radius : 6px ; 
      -webkit-border-bottom-left-radius : 6px ; 
      border-top-right-radius : 6px ; 
      border-top-left-radius : 6px ; 
      border-bottom-right-radius : 6px ; 
      border-bottom-left-radius : 6px ; 
      }

　　瀏覽器支持：border-radius 只有所有版本的 IE 瀏覽器和 Opera 不支持，Webkit 和 Gecko 核心的瀏覽器都支持。

擴展閱讀：

　　‧CSS3系列教程:邊框半徑和圓角
　　‧border-radius: W3C Working Draft
　　‧Border-radius: create rounded corners with CSS! — CSS3.info
　　‧Introduction to CSS3, Part 2: Borders
　　‧An Ode to border-radius
　　‧CSS3 Border-Radius and Rounded Corners

9)邊框圖片

　　border-image 屬性允許你在元素的邊框上設定圖片，讓你從通常的 solid、dotted 和其它邊框樣式中解放出來。該屬性給設計師一個更好的工具，用它可以方便的定義設計元素的邊框樣式，比 background-image 屬性(對高級設計來說)或枯燥的默認邊框樣式更好用。我們也可以明確的定義一個邊框可以被如何縮放或平鋪。

SpoonGraphics 博客為它的圖片邊框使用了 border-image 屬性。

　　在 SpoonGraphis blog 中，border-image 被用於圖片邊框，如下所示：

 #content .post img { 
      border : 6px solid #f2e6d1 ; 
      -webkit-border-image : url ( main-border.png ) 6 repeat ; 
      -moz-border-image : url ( main-border.png ) 6 repeat ; 
      border-image : url ( main-border.png ) 6 repeat ; 
      }

　　要想定義 border-image ，我們必須指定圖片地址，圖片的那部分將被剪切並用於元素的每一個邊上，以及圖片是否被縮放或平鋪。

　　為了製作一個使用下面的圖片作為邊框的 div ，我們應該使用下面的代碼(我們將為這個例子添加 Opera 和 Konqueror 支持):

div { 
      border-width : 18px 25px 25px 18px ; 
      -webkit-border-image : url ( example.png ) 18 25 25 18 stretch stretch ; 
      -moz-border-image : url ( example.png ) 18 25 25 18 stretch stretch ; 
      -o-border-image : url ( example.png ) 18 25 25 18 stretch stretch ; 
      -khtml-border-image : url ( example.png ) 18 25 25 18 stretch stretch ; 
      border-image : url ( example.png ) 18 25 25 18 stretch stretch ; 
	  }

　　該屬性的最後一個值可以是 stretch (默認), round (只有一個平鋪了整數倍的圖片被填充在允許的地方)或 repeat。在我們的例子中，上下左右邊框圖片被拉伸。如果我們只想頂部和底部邊框被拉伸，我們可以使用下面的 CSS:

div { 
      ( ... ) 
      border-image : url ( example.png ) 18 25 25 18 stretch repeat ; 
	  }

　　我們可以可以單獨的指定每一個角，如果我們想為每一個角使用不同的圖片：

 div { 
      border-top-image : url ( example.png ) 5 5 stretch ; 
      border-right-image : url ( example.png ) 5 5 stretch ; 
      border-bottom-image : url ( example.png ) 5 5 stretch ; 
      border-left-image : url ( example.png ) 5 5 stretch ; 
      border-top-left-image : url ( example.png ) 5 5 stretch ; 
      border-top-right-image : url ( example.png ) 5 5 stretch ; 
      border-bottom-left-image : url ( example.png ) 5 5 stretch ; 
      border-bottom-right-image : url ( example.png ) 5 5 stretch ; 
      }

　　如果瀏覽器不支持 border-image 屬性，它將無視這些屬性，並只應用定義的其它邊框屬性，比如 border-width 和 border-color。

　　瀏覽器支持:border-image 目前只有 Webkit 核心瀏覽器支持。不太確定 Firefox 的下一個版本是否支持。

擴展閱讀：

　　‧The 'border-image' property: W3C Working Draft
　　‧Border-image: using images for your border — CSS3.info
　　‧border-image in Firefox
　　‧border-image demonstration page
　　‧Replicating iPhone Buttons the “webkit” way!

10)盒陰影

　　box-shadow 屬性可以對 HTML 元素添加陰影而不用額外的標籤或背景圖片。類似 text-shadow 屬性，它增強設計的細節；而且因為它不影響內容的可讀性，隨意他可以是增加那種額外感覺/效果的一種很好的方法。

10to1為它的導航北京和hover狀態使用了box-shadow屬性。

　　10to1 為其導航區域增加的一個簡單的陰影並將該屬性應用於導航鏈接的 hover 效果:

#navigation { 
	  -webkit-box-shadow : 0 0 10px #000 ; 
	  -moz-box-shadow : 0 0 10px #000 ; 
	  } 
	  #navigation li a :hover , 
	  #navigation li a :focus { 
	  -webkit-box-shadow : 0 0 5px #111 ; 
	  -moz-box-shadow : 0 0 5px #111 ; 
	  }

　　box-shadow 屬性可以用多個值：水平偏移、垂直偏移、模糊半徑、伸展半徑和陰影顏色。水平和垂直偏移和陰影色使用的最多。

　　在一個 div 上應用紅色陰影，右邊和下邊偏移 4px，無模糊，我們可以使用下面的代碼：

div { 
      -moz-box-shadow : 4px 4px 0 #f00 ; 
      -webkit-box-shadow : 4px 4px 0 #f00 ; 
      box-shadow : 4px 4px 0 #f00 ; 
      }

　　瀏覽器支持: box-shadow目前只有Webkit核心瀏覽器支持，但是即將發布的Firefox 3.5也將提供很好的支持。

擴展閱讀：

　　‧CSS3系列教程:陰影
　　‧The 'box-shadow' property — W3C Working Draft
　　‧Box-shadow, one of CSS3's best new features — CSS3.info
　　‧Apple's Navigation bar using only CSS
　　‧Box Shadow — Surfin' Safari blog

11)盒子大小

　　根據 CSS 2.1 規範，在計算盒子的總大小的時候，元素的邊框和 padding 應該被加入到寬度和高度之中的。但是眾所周知，舊的瀏覽器卻以它們自己的非常有“創意”的方式來解釋這個規範。box-sizing 屬性允許你指定瀏覽器如何計算一個元素的寬度和高度。

WordPress在控制面板的所有的輸入框元素中使用border-box屬性。

　　WordPress 後台區域在它的所有 text 類型的 input 標籤和 textarea 標籤上使用了該屬性:

input [ type = "text" ] , 
	  textarea { 
	  -moz-box-sizing : border-box ; 
	  -webkit-box-sizing : border-box ; 
	  -ms-box-sizing : border-box ; 
	  box-sizing : border-box ; 
	  }

　　第三個屬性( -ms-box-sizing )只有在 Internet Explorer 8 下有效。通過其他選擇器，WordPress 的樣式表同樣添加了 Konqueror 屬性： -khtml-box-sizing。

　　box-sizing 屬性可以兩個值中的一個：border-box 和 content-box。Content-box 如 CSS 2.1 中的定義的那樣渲染寬度。Border-box 從設定的寬度和高度中扣除 padding 和邊框(如老式瀏覽器那樣。)。

　　瀏覽器支持：box-sizing 被 IE8、Opera、Gecko 核心和 Webkit 核心瀏覽器支持。

擴展閱讀：

　　‧'box-sizing' property: W3C Candidate Recommendation
　　‧Box-sizing, box-model fixes for the simple people: CSS3.info
　　‧CSS3 box-sizing attribute

12)媒體查詢

　　媒體查詢（media queries）可以讓你為不同的設備基於它們的能力定義不同的樣式。比如，在可視區域小於 480 像素的時候，你可能想讓網站的側欄顯示在主內容的下邊，這樣它就不應該浮動並顯示在右側了：

 #sidebar { 
	  float : right ; 
	  display : inline ; /* IE Double-Margin Bugfix */ 
	  } 

  @media all and (max-width:480px) { 
	  #sidebar { 
		  float : none ; 
		  clear : both ; 
		  } 
	  }

　　你也可以指定使用慮色屏的設備：

  a {color: grey;} 
  @media screen and (color) { 
	  a {color: red;} 
  }

　　潛力是無限的。這個屬性是很有用的因為你不再需要必須為不同的設備寫獨立的樣式表了，而且你也無需使用JS來確定每個用戶的瀏覽器的屬性和功能。一個實現一個靈活的佈局的更加流行的基於 Javascript 的方案是使用智能的流體佈局，讓佈局對於用戶的瀏覽器分辨率更加靈活。

　　瀏覽器支持：媒體查詢被基於 webkit 核心的瀏覽器和 Opera 支持。Firefox 將在 3.5 版本中支持它。IE 目前不支持這些屬性而且在將來的版本中，也沒有支持的計劃。

擴展閱讀：

　　‧媒體查詢: W3C候選推薦
　　‧擴展到CSS 3媒體查詢
　　‧媒體查詢: CSS3.info
　　‧The bleeding edge of web: media queries
　　‧安全的媒體查詢
　　‧媒體類型

13）語音

　　CSS 3 的語音模塊 CSS 3 可以讓你為屏幕閱讀者指定語音樣式。你可以控制語音的不同設置，比如:

　　‧voice-volume
　　使用從 0 到 100 的數字(0 即靜音)、百分數或關鍵詞( silent , x-soft , soft , medium , loud 和 x-loud 等)來設置音量。

　　‧voice-balance
　　控制來自哪個聲道(如果用戶的音箱系統支持立體聲)。

　　‧Speak
　　指示屏幕閱讀器閱讀相關的文字、數字或標點符號。可用的關鍵詞為 none , normal , spell-out , digits , literal-punctuation , no-punctuation和inherit .

　　‧Pauses and rests
　　在一個元素的被讀完之前或之後設定暫停或停止。你可以使用時間單位(比如, “2s”表示2秒鐘)或關鍵詞( none , x-weak , weak , medium , strong 和 x-strong )。

　　‧Cues
　　使用聲音限制特定元素並控制器音量。

　　‧voice-family
　　設定特定的聲音類型和聲音合成(就像 font-family )。

　　‧voice-rate
　　控制閱讀的速度。可以設置為百分數或關鍵詞: x-slow , slow , medium , fast和x-fast .

　　‧voice-stress
　　指示應該使用的任何重音(強語氣)，使用不同的關鍵詞: none , moderate , strong和reduced .
比如，告訴屏幕閱讀器使用男聲讀取所有的 h2 標籤，用左邊的喇叭，用軟調按照指定的聲音，可以像下面這樣指定樣式：

h2 { 
	  voice-family : female ; 
	  voice-balance : left ; 
	  voice- volume : soft ; 
	  cue-after : url ( sound.au ) ; 
	  }

　　不幸的是，這個屬性現在只有非常少的支持，但是顯然值得關注因為我們可以在將來提高我們網站的易用性。

　　瀏覽器支持:現在，只有 Opera 瀏覽器（Windows XP and 2000）支持語音模塊的部分屬性。為了使用它們，需要使用 -xv- 前綴，比如 -xv-voice-balance: right 。

擴展閱讀：

　　‧CSS3語音模塊——W3C工作草案
　　‧CSS3語音— CSS3.info
　　‧聽覺CSS:支持CSS 2聽覺樣式表/ CSS 3語音模塊

結尾

　　CSS 3 屬性可以極大的提高你的工作流程，讓一些最耗時的 CSS 任務不費吹灰之力就能搞定，並且可以使用更好、更簡潔和更輕的代碼標籤。一些屬性尚未被廣泛的支持，甚至是最新的瀏覽器，但這並不意味著我們不能用它們進行試驗或者為使用先進瀏覽器的用戶更高級的功能和 CSS 樣式。

　　在這點兒上，請記住，培養我們的用戶也同樣是有用和必須的：網站無需看起來在每個瀏覽器裡都要保持一致，而且如果一個差異不（負面）影響美學和網站的可用性，它就應該是被考慮的。如果我們繼續浪費大量的時間和金錢以使每個細節絕對一致 (而不是採用更靈活的和未來導向的方案)，用戶將沒有升級他們的瀏覽器的任何需要/動機，這樣我們就不得不在舊的瀏覽器變為古董級瀏覽器以及強大的現代瀏覽器變為標準之前等待很長的時間。

　　我們試驗和使用新的 CSS 3 屬性越早，它們就被流行的瀏覽器支持的更早，我們也就能夠更早的廣泛使用它們。

推薦閱讀及資源：

　　‧CSS3 Previews: CSS3.info
　　‧CSS 3: Exciting Function and Features: 30 Useful Tutorials
　　‧5 CSS3 Techniques For Major Browsers using the Power of jQuery
　　‧Introduction to CSS3 – Part 1: What is it?
　　‧Comparison of layout engines (Cascading Style Sheets) and Wikipedia
　　‧Progressive enhancement
　　‧Five CSS design browser differences I can live with
　　‧Progressive Enhancement with CSS
　　‧CSS support in Opera 9.5

關於原作者

　　Inayaili de León 是一個葡萄牙的網頁設計師。她對網頁設計和前端編碼真的非常感興趣，而且喜歡漂亮和簡潔的網站。她居住在倫敦。你可以在 Web Designer Notebook 上看到她的更多文章，並 follow her on Twitter。

分頁： « 1 2 3

睡蓮‧池水間

用 CSS 3 將你的設計帶入下個高度

子標題

專題

評分

用 CSS 3 將你的設計帶入下個高度

用 CSS 3 將你的設計帶入下個高度

用 CSS 3 將你的設計帶入下個高度

用 CSS 3 將你的設計帶入下個高度

最新發表及資訊區

最新公告

最新文章

嵌入式內聯圖片

WL-OliveGreen

PHP 沈思錄之三：Smarty

樣板管理下儲存檔案後亂碼

Acid3算法更改　IE9/10滿分通過測試

避免常見的六種 HTML5 錯誤用法

CSS Specificity 在 IE 下的錯誤規則

文章分類

最新回覆

有關ｌｏｇｏ可以換嗎？

有關ｌｏｇｏ可以換嗎？

有關ｌｏｇｏ可以換嗎？

WL-OliveGreen

WL-OliveGreen

WL-OliveGreen

浮生錄回覆

最新浮生錄文章

最新留言

请教莲大：关于模板界面的修改

CBB 4.0.3修正版無法顯示編輯按鈕！

如何讓首頁的輪播區不在其他頁面顯示

xoops 首頁最新主題無法顯示主題類別(cbb4.03)

論壇區塊顏色無法跟佈景主題顏色一致

造訪統計

連結

睡蓮‧池水間

用 CSS 3 將你的設計帶入下個高度

子標題

專題

引用

評分

用 CSS 3 將你的設計帶入下個高度

用 CSS 3 將你的設計帶入下個高度

用 CSS 3 將你的設計帶入下個高度

用 CSS 3 將你的設計帶入下個高度

最 新 發 表 及 資 訊 區

最新公告

最新文章

文章分類

最新回覆

浮生錄回覆

最新浮生錄文章

最新留言

造訪統計

連結

最新發表及資訊區