10個CSS3屬性

摘抄自網絡，記錄，省得之後找不到了

導讀：隨着Css3和html5的風靡，愈來愈多的前端人員開始學習Css3，今天的文章就是來講說前端應該掌握10個Css3屬性。

對於Css3的新屬性，你又瞭解多少呢？雖然大多數的css3屬性在不少流行的瀏覽器中不支持，可是咱們鼓勵在前端開發中要學會而且運行這些css3屬性，由於這是將來的趨勢。

關鍵是首先肯定你是否對各個瀏覽器之間的細微的差異有所瞭解，你能確定的說IE顯示的90度的角就不圓滑嘛？這取決於你的決定。可是要永遠記住，網站設計沒必要看到全部瀏覽器的不一樣。

1. Border-radius

Border-radius

Border-radius是一大堆CSS3屬性中最受歡迎的一種，border-radius是CSS3中級別最高的一個屬性。當設計者懼怕一個層在將在不一樣的瀏覽器之間以不一樣的方式顯示時，CSS圓角，一個很初級的知識，將引導他們開始學習。 咱們爲移動瀏覽器提供一個備用的觀看體驗的想法都很是好。奇怪的是，當這種方法出如今桌面瀏覽器上時，他們卻又不這麼認爲。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

接下來是很是廣泛的Box-shadow，可使你的元素當即美化，只是記得不要把值設得太離譜。

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

box-shadow的四個參數

1. x-offset x軸偏移
2. y-offset y軸偏移
3. blur 模糊值
4. color of shadow 陰影顏色

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

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

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

1. x-offset 水平位移
2. y-offest 垂直位移
3. blur 模糊值
4. 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;
}

Text-Outline

4. Text-Stroke

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

Multiple Backgrounds

Background屬性在CSS3樣式中已經完全改革，開始支持多背景圖片。 舉個簡單的例子，若是沒和合適的圖像，咱們將使用兩個教程的圖像做爲咱們的背景，固然在程序中你可能會用紋理，也許是漸變做爲圖像。

.box {
background: url(image/path.jpg) 0 0 no-repeat,
 url(image2/path.jpg) 100% 0 no-repeat;
}

以上，經過逗號分隔符，插入了兩張背景圖像，第一個的定位是（0，0），第二個的定位是（100%，0）。 要肯定你對不支持的瀏覽器使用了備用圖片，不然，它將跳此屬性，使背景圖像留空。 對舊瀏覽器的補償要添加一張單獨的圖像給老瀏覽器用，像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

目前咱們已經可使用這種比較靈活的方式去重定義背景圖像的大小。

background: url(path/to/image.jpg) no-repeat;
background-size: 100% 100%;

上面的代碼使得背景圖像已經佔據了整個可用空間。可是，若是咱們使用一個特殊的圖片去佔據body元素的整個空間而不管窗口有多寬，那又怎麼作？

body, html { height: 100%; }

body {
 background: url(path/to/image.jpg) no-repeat;
 background-size: 100% 100%;
}

對，就是這麼作，分別定義background-size的x，y參數。 最新版本的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

瀏覽器最初開發文本溢出屬性能夠設定兩個值：clip ellipsis 此屬性支持切斷容器中的文本，並且也給出了一個省略號的特性。

Text-overflow

.box {
   -o-text-overflow: ellipsis;
   text-overflow:ellipsis;
   overflow:hidden;
   white-space:nowrap;
   border: 1px solid black;
   width: 400px;
   padding: 20px;
   cursor: pointer;
}

或許你會考慮當鼠標通過時顯示所有的文本內容。

#box:hover {
  white-space: normal;
  color: rgba(0,0,0,1);
  background: #e3e3e3;
  border: 1px solid #666;
}

有點奇怪，這看起來並不像是重置text-overflow屬性或是停用它，使之生效，在on:hover中咱們可使得white-space的 normal屬性。如今正常了。 知道嗎？您還能夠指定本身的字符串，應使用省略號的位置。這樣作來修飾要顯示的文本字符串。

8. Flexible Box Model

Flexible Box Model將最終使咱們遠離相似float的困擾。雖然是要給你的頭部換一個新的屬性，但一旦你這麼作了，將終身受益。 作個演示，建立簡單的兩列布局。

<div id="container">
 <div id="main"> Main content here </div>
 <aside> Aside content here </aside>
</div>

首先咱們要設定一個容器，而後指定它的寬和高，即使是沒有實質性的內容在裏面。

#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;
}

到目前爲了尚未看出什麼效果來。

值得一提的是，雖然咱們設置了display:box模型，它的子元素會佔據整個垂直空間。這就是它的默認box-align屬性stretch。 看看有什麼效果產生，當咱們設置了#main的寬度後。

#main {
  background: yellow;
  width: 800px;
}

Flexible Box Model

可是咱們仍有個疑問，爲何aside不佔據剩餘的所有空間呢？咱們能夠用新屬性box-flex來試下。 box-flex 使得元素佔據整個空間。

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;
 }

使用這個屬性後，無論#main有多寬，aside都將佔據整個可用的空間。同時你也沒必要擔憂諸如float等產生的問題，像使得元素被排擠到下一 行。

Flexible Box Model

我只是在這兒膚淺的說一下，請參閱保羅愛爾蘭優秀文章的詳細信息。然而，使用此方法的時候也應注意一下兼容問題，例如老的瀏覽器應該先測試下，而且 提供必要的備註。

9. Resize

只有Firefox 4和Safari 3支持此屬性。Resize是CSS3 UI模型中的一部分，可用於重定義textarea的大小。

<textarea name="elem" id="elem" rows="5" cols="50"></textarea>

默認狀況下webkit瀏覽器和Firefox 4支持水平和垂直方向上的重定義。

textarea {
   -moz-resize: vertical;
   -webkit-resize: vertical;
   resize: vertical;
}

可能的值：

1. both： 重定義水平和垂直方向
2. horizontal： 水平調整大小限制
3. vertical： 垂直調整大小限制
4. none： 不支持重定義

Resize

十、 Transition

也許CSS3最使人興奮的增補，就是在沒有 JavaScript 的元素的狀況下產生動畫。好像IE9還不支持此功能，但這並不表明你不能使用這個功能，關鍵是在於提升技能。 如今模仿一個效果，當鼠標滑過右側連接時，文本向右滑動。

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 有三個參數：

1. The property to transition. （Set this value to all if needed） 轉換屬性。（設置此值爲全部若有須要）
2. The duration 持續時間
3. The easing type 緩動類型

爲何咱們不將transition直接應用到hover上呢？是由於咱們只是在mouseover時生效，當mouseout時元素將當即返回到 其最初的狀態。 由於咱們對效果作了調整，全部對舊的瀏覽器不會產生任何影響。 接下來是經過文章所學，咱們來創建的一個簡潔的效果。你們能夠經過查看源碼來學習來。具體如何建立我就不翻譯了。