提升你設計水平的CSS3新技術（下）

 

提升你設計水平的CSS3新技術（上）

8. 圓角（邊框半徑）

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

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

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

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

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

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

我們可以做的更進一步，添加原始的CSS3 屬性和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如CSS2.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. 語音

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

• 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 語音模塊

結尾

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

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

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

 

推薦閱讀及資源：

• 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 .

 

 

原文：用CSS3將你的設計帶入下個高度
譯自：Take Your Design To The Next Level With CSS3
版權所有，轉載請註明出處，多謝！！