導(dǎo)讀：隨著Css3和html5的風(fēng)靡，越來越多的前端人員開始學(xué)習(xí)Css3，今天的就來說說前端開發(fā)應(yīng)該掌握的10個(gè)Css3屬性。
對于Css3的新屬性，你又了解多少呢？雖然大多數(shù)的css3屬性在很多流行的瀏覽器中不支持，但是我們鼓勵(lì)在前端開發(fā)中要學(xué)會(huì)并且運(yùn)行這些css3屬性，因?yàn)檫@是未來的趨勢。
關(guān)鍵是首先確定你是否對各個(gè)瀏覽器之間的細(xì)微的差別有所了解，你能肯定的說IE顯示的90度的角就不圓滑嘛？這取決于你的決定。但是要永遠(yuǎn)記住，網(wǎng)站設(shè)計(jì)不必看到所有瀏覽器的不同。
1. Border-radius
Border-radius是一大堆CSS3屬性中最受歡迎的一種，border-radius是CSS3中級別最高的一個(gè)屬性。當(dāng)設(shè)計(jì)者害怕一個(gè)層在將在不同的瀏覽器之間以不同的方式顯示時(shí)，CSS圓角，一個(gè)很初級的知識，將引導(dǎo)他們開始學(xué)習(xí)。 我們?yōu)橐苿?dòng)瀏覽器提供一個(gè)備用的觀看體驗(yàn)的想法都非常好。奇怪的是，當(dāng)這種方法出現(xiàn)在桌面瀏覽器上時(shí)，他們卻又不這么認(rèn)為。border-radius是一大堆CSS3屬性中最受歡迎的一種，border-radius是CSS3中級別最高的一個(gè)屬性。當(dāng)設(shè)計(jì)者害怕一個(gè)層在將在不同的瀏覽器之間以不同的方式顯示時(shí)，CSS圓角，一個(gè)很初級的知識，將引導(dǎo)他們開始學(xué)習(xí)。我們?yōu)橐苿?dòng)瀏覽器提供一個(gè)備用的觀看體驗(yàn)的想法都非常好。奇怪的是，當(dāng)這種方法出現(xiàn)在桌面瀏覽器上時(shí)，他們卻又不這么認(rèn)為。
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
注意：請?jiān)赟afari 5和IE9瀏覽器中執(zhí)行“border-radius”語法。
圓
許多讀者也許不會(huì)意識到我們可以用這個(gè)屬性來做一個(gè)圓。
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
如果想再添加點(diǎn)效果，我們可以利用Flexible Box Model（詳情在8中）來使得文字在垂直在水平方向都居中。這需要加點(diǎn)代碼，但這僅僅是對不同瀏覽器的補(bǔ)償。
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，可以使你的元素立即美化，只是記得不要把值設(shè)得太離譜。
-webkit-box-shadow: 1px 1px 3px #292929;
-moz-box-shadow: 1px 1px 3px #292929;
box-shadow: 1px 1px 3px #292929;
box-shadow的四個(gè)參數(shù)
x-offset x軸偏移
y-offset y軸偏移
blur 模糊值
color of shadow 陰影顏色
現(xiàn)在，許多人不知道可以一次運(yùn)用多個(gè)box-shadows，這樣做會(huì)產(chǎn)生一些有趣的效果。在下圖中，我使用藍(lán)色和綠色陰影來放大一下效果。
Box-shadow
-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
<div>
<img src="tuts.jpg" alt="Tuts" />
</div>
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是我們可以省略前綴的幾個(gè)CSS屬性之一，類似的還有box-shadow，它必須應(yīng)用于文本，并它們有相同的四個(gè)參數(shù)：
x-offset 水平位移
y-offest 垂直位移
blur 模糊值
color of shadow 陰影顏色
h1 {
text-shadow: 0 1px 0 white;
color: #292929;
}
Text-Outline和box-shadow一樣，它可以設(shè)置多個(gè)陰影通過逗號分隔符。例如，我們創(chuàng)建文本框的輪廓，當(dāng)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;
}
Text-Outline
4. Text-Stroke
使用這個(gè)方法時(shí)要注意了，只有Webkit（Safari， Chrome， iPhone）在最后的幾年內(nèi)還支持這個(gè)屬性。其實(shí)，雖然我可能是錯(cuò)的，Text-stroke還不屬于CSS3范疇的一部分。在這種情況下，使用白色字體時(shí)，F(xiàn)irefox會(huì)顯示一個(gè)空白頁面。要解決此問題，你即可以使用Javascript，也可以通過使用一種不同于背景顏色的文字顏色。
h1 {
-webkit-text-stroke: 3px black;
color: white;
}
Feature Detection我們?nèi)绾螢閒irefox提供一組可用的樣式，和為另外的一組Safari或Chrome？解決辦法就是多做測試。 通過feature detection，我們可以利用JavaScript來測試某屬性是否可用，如果不行，我可 就要采用備用的。 再回到text-stroke的問題上，為不支持此屬性的瀏覽器設(shè)定一個(gè)備用黑色（目前的除webkit外）。
var h1 = document.createElement('h1');
if ( !( 'webkitTextStroke' in h1.style ) ) {
var heading = document.getElementsByTagName('h1')[0];
heading.style.color = 'black';
}
首先我們設(shè)定一個(gè)h1元素，然后執(zhí)行，通過樣式屬性以確定-webkit-text-stroke是否支持此元素。如果不支持，我們會(huì)把標(biāo)題由白色 設(shè)置成黑色。
5. Multiple Backgrounds
Multiple Backgrounds
Background屬性在CSS3樣式中已經(jīng)徹底改革，開始支持多背景圖片。 舉個(gè)簡單的例子，如果沒和合適的圖像，我們將使用兩個(gè)教程的圖像作為我們的背景，當(dāng)然在程序中你可能會(huì)用紋理，也許是漸變作為圖像。
.box {
background: url(image/path.jpg) 0 0 no-repeat,
url(image2/path.jpg) 100% 0 no-repeat;
}
以上，通過逗號分隔符，插入了兩張背景圖像，第一個(gè)的定位是（0，0），第二個(gè)的定位是（100%，0）。 要確定你對不支持的瀏覽器使用了備用圖片，否則，它將跳此屬性，使背景圖像留空。 對舊瀏覽器的補(bǔ)償要添加一張單獨(dú)的圖像給老瀏覽器用，像IE7。要定義兩遍background，一遍是為老瀏覽器，另一遍是重寫�；蛘吣憧梢栽俅尾榭聪� Modernizr。
.box {
/* fallback */
background: url(image/path.jpg) no-repeat;
/* modern browsers */
background: url(image/path.jpg) 0 0 no-repeat,
url(image2/path.jpg) 100% 0 no-repeat;
}
6. background-size
目前我們已經(jīng)可以使用這種比較靈活的方式去重定義背景圖像的大小。
background: url(path/to/image.jpg) no-repeat;
background-size: 100% 100%;
上面的代碼使得背景圖像已經(jīng)占據(jù)了整個(gè)可用空間。但是，如果我們使用一個(gè)特殊的圖片去占據(jù)body元素的整個(gè)空間而無論窗口有多寬，那又怎么做？
body, html { height: 100%; }
body {
background: url(path/to/image.jpg) no-repeat;
background-size: 100% 100%;
}
對，就是這么做，分別定義background-size的x，y參數(shù)。 最新版本的Chrome 和 Safari支持此屬性，但我們還是要用舊的方法支持舊的瀏覽器。
body {
background: url(path/to/image.jpg) no-repeat;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
}
7. text-overflow
瀏覽器最初開發(fā)文本溢出屬性可以設(shè)定兩個(gè)值：clip ellipsis 此屬性支持切斷容器中的文本，而且也給出了一個(gè)省略號的特性。
.box {
-o-text-overflow: ellipsis;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
border: 1px solid black;
width: 400px;
padding: 20px;
cursor: pointer;
}
或許你會(huì)考慮當(dāng)鼠標(biāo)經(jīng)過時(shí)顯示全部的文本內(nèi)容。
#box:hover {
white-space: normal;
color: rgba(0,0,0,1);
background: #e3e3e3;
border: 1px solid #666;
}
有點(diǎn)奇怪，這看起來并不像是重置text-overflow屬性或是停用它，使之生效，在on:hover中我們可以使得white-space的 normal屬性。現(xiàn)在正常了。 知道嗎？您還可以指定自己的字符串，應(yīng)使用省略號的位置。這樣做來修飾要顯示的文本字符串。
8. Flexible Box Model
Flexible Box Model將最終使我們遠(yuǎn)離類似float的困擾。雖然是要給你的頭部換一個(gè)新的屬性，但一旦你這么做了，將終身受益。 做個(gè)演示，創(chuàng)建簡單的兩列布局。
<div id="container">
<div id="main"> Main content here </div>
<aside> Aside content here </aside>
</div>
首先我們要設(shè)定一個(gè)容器，然后指定它的寬和高，即便是沒有實(shí)質(zhì)性的內(nèi)容在里面。
#container {
width: 960px;
height: 500px; /* just for demo */
background: #e3e3e3;
margin: auto;
display: -moz-box;
display: -webkit-box;
display: box;
接下來分別定義#main和aside的背景色
#main {
background: yellow;
}
aside {
background: red;
}
到目前為了還沒有看出什么效果來。
值得一提的是，雖然我們設(shè)置了display:box模型，它的子元素會(huì)占據(jù)整個(gè)垂直空間。這就是它的默認(rèn)box-align屬性stretch。 看看有什么效果產(chǎn)生，當(dāng)我們設(shè)置了#main的寬度后。
#main {
background: yellow;
width: 800px;
}
但是我們?nèi)杂袀�(gè)疑問，為什么aside不占據(jù)剩余的全部空間呢？我們可以用新屬性box-flex來試下。 box-flex 使得元素占據(jù)整個(gè)空間。
aside {
display: block; /* cause is HTML5 element */
background: red;
/* take up all available space */
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
}
使用這個(gè)屬性后，不管#main有多寬，aside都將占據(jù)整個(gè)可用的空間。同時(shí)你也不必?fù)?dān)心諸如float等產(chǎn)生的問題，像使得元素被排擠到下一 行。
我只是在這兒膚淺的說一下，請參閱保羅愛爾蘭優(yōu)秀文章的詳細(xì)信息。然而，使用此方法的時(shí)候也應(yīng)注意一下兼容問題，例如老的瀏覽器應(yīng)該先測試下，并且 提供必要的備注。
9. Resize
只有Firefox 4和Safari 3支持此屬性。Resize是CSS3 UI模型中的一部分，可用于重定義textarea的大小。
<textarea name="elem" id="elem" rows="5" cols="50"></textarea>
默認(rèn)情況下webkit瀏覽器和Firefox 4支持水平和垂直方向上的重定義。
textarea {
-moz-resize: vertical;
-webkit-resize: vertical;
resize: vertical;
}
可能的值：
both： 重定義水平和垂直方向
horizontal： 水平調(diào)整大小限制
vertical： 垂直調(diào)整大小限制
none： 不支持重定義
10、Transition
也許CSS3最令人興奮的增補(bǔ)，就是在沒有 JavaScript 的元素的情況下產(chǎn)生動(dòng)畫。好像IE9還不支持此功能，但這并不代表你不能使用這個(gè)功能，關(guān)鍵是在于提高技能。 現(xiàn)在模仿一個(gè)效果，當(dāng)鼠標(biāo)滑過右側(cè)鏈接時(shí)，文本向右滑動(dòng)。
The HTML
<ul>
<li>
<a href="#"> Hover Over Me </a>
</li>
<li>
<a href="#"> Hover Over Me </a>
</li>
<li>
<a href="#"> Hover Over Me </a>
</li>
<li>
<a href="#"> Hover Over Me </a>
</li>
</ul>
The CSS
ul a {
-webkit-transition: padding .4s;
-moz-transition: padding .4s;
-o-transition: padding .4s;
transition: padding .4s;
}
a:hover {
padding-left: 6px;
}
transition 有三個(gè)參數(shù)：
The property to transition. （Set this value to all if needed） 轉(zhuǎn)換屬性。（設(shè)置此值為所有如有需要）
The duration 持續(xù)時(shí)間
The easing type 緩動(dòng)類型
為什么我們不將transition直接應(yīng)用到hover上呢？是因?yàn)槲覀冎皇窃趍ouseover時(shí)生效，當(dāng)mouseout時(shí)元素將立即返回到 其最初的狀態(tài)。 因?yàn)槲覀儗πЧ隽苏{(diào)整，所有對舊的瀏覽器不會(huì)產(chǎn)生任何影響。 接下來是通過文章所學(xué)，我們來建立的一個(gè)簡潔的效果。大家可以通過查看源碼來學(xué)習(xí)來。具體如何創(chuàng)建我就不翻譯了。