你需要熟知10個的CSS3屬性

前面我已經介紹過了30個應該記住的CSS選擇器，那麼新的CSS3又有哪些新屬性呢？雖然大多數需要特定的前綴，但你仍然可以在你的項目中使用它，其實上我也鼓勵大家這麼做。

關鍵是首先確定你是否對各個浏覽器之間的細微的差別有所了解，你能肯定的說IE顯示的90度的角就不圓滑嘛？這取決於你的決定。但是要永遠記住，網站設計不必看到所有浏覽器的不同。在文章的最後，我們將顯示一個有趣的最終的案例。

1、 border-radius

border-radius是一大堆CSS3屬性中最受歡迎的一種，border-radius是CSS3中級別最高的一個屬性。當設計者害怕一個層在將在不同的浏覽器之間以不同的方式顯示時，CSS圓角，一個很初級的知識，將引導他們開始學習。

我們為移動浏覽器提供一個備用的觀看體驗的想法都非常好。奇怪的是，當這種方法出現在桌面浏覽器上時，他們卻又不這麼認為。

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

注意：請在Safari 5 和 IE9浏覽器中執行”border-radius”語法。

圓

許多讀者也許不會意識到我們可以用這個屬性來做一個圓。

-moz-border-radius: 50px;

-webkit-border-radius: 50px;

border-radius: 50px;

如果想再添加點效果，我們可以利用Flexible Box Model（詳情在8中）來使得文字在垂直在水平方向都居中。這需要加點代碼，但這僅僅是對不同浏覽器的補償。

display: -moz-box;

display: -webkit-box;

display: box;

-moz-box-orient: horizontal; /* the default, so not really necessary here */

-webkit-box-orient: horizontal;

box-orient: horizontal;

-moz-box-pack: center;

-moz-box-align: center;

-webkit-box-pack: center;

-webkit-box-align: center;

box-pack: center;

box-align: center;

2、 box-shadow

接下來是非常普遍的box-shadow，可以使你的元素立即美化，只是記得不要把值設得太離譜。

-webkit-box-shadow: 1px 1px 3px #292929;

-moz-box-shadow: 1px 1px 3px #292929;

box-shadow: 1px 1px 3px #292929;

box-shadow的四個參數

x-offset x軸偏移

y-offset y軸偏移

blur 模糊值

color of shadow 陰影顏色

現在，許多人不知道可以一次運用多個box-shadows，這樣做會產生一些有趣的效果。在下圖中，我使用藍色和綠色陰影來放大一下效果。

-webkit-box-shadow: 1px 1px 3px green, -1px -1px blue;

-moz-box-shadow: 1px 1px 3px green,-1px -1px blue;

box-shadow: 1px 1px 3px green, -1px -1px blue;

Clever Shadows

The CSS

.box:after {

content: '';

position: absolute;

z-index: -1; /* hide shadow behind image */

/* The Shadow */

-webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);

-moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);

-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);

width: 70%;

left: 15%; /* one half of the remaining 30% (see width above) */

height: 100px;

bottom:  0;

}

3、 text-shadow

text-shadow是我們可以省略前綴的幾個CSS屬性之一，類似的還有box-shadow，它必須應用於文本，並它們有相同的四個參數：

x-offset 水平位移

y-offest 垂直位移

blur 模糊值

color of shadow 陰影顏色

h1 {

text-shadow: 0 1px 0 white;

color: #292929;

}

Text-Outline

和box-shadow一樣，它可以設置多個陰影通過逗號分隔符。例如，我們創建文本框的輪廓，當webkit不支持stroke效果，我們可以使用下面的代碼讓更多的浏覽器支持（雖然不是很美觀）。

body { background: white; }

h1 {

text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black;

color: white;

}

4、 Text-Stroke

使用這個方法時要注意了，只有webkit（Safari， Chrome， iPhone）在最後的幾年內還支持這個屬性。其實，雖然我可能是錯的，’text-stroke’還不屬於CSS3范疇的一部分。在這種情況下，使用白 色字體時，firefox會顯示一個空白頁面。要解決此問題，你即可以使用Javascript，也可以通過使用一種不同於背景顏色的文字顏色。

h1 {

-webkit-text-stroke: 3px black;

color: white;

}

Feature Detection

我們如何為firefox提供一組可用的樣式，和為另外的一組Safari或Chrome？解決辦法就是多做測試。

通過feature detection，我們可以利用JavaScript來測試某屬性是否可用，如果不行，我可就要采用備用的。

再回到text-stroke的問題上，為不支持此屬性的浏覽器設定一個備用黑色（目前的除webkit外）。

var h1 = document.createElement('h1');

if ( !( 'webkitTextStroke' in h1.style ) ) {

var heading = document.getElementsByTagName('h1')[0];

heading.style.color = 'black';

}

首先我們設定一個h1元素，然後執行，通過樣式屬性以確定-webkit-text-stroke是否支持此元素。如果不支持，我們會把標題由白色設置成黑色。

5、 Multiple Backgrounds