CSS3新屬性

邊框：

• border-radius?用于創建圓角

  div
  {
  border:2px solid;
  border-radius:25px;
  -moz-border-radius:25px; /* Old Firefox */
  }

• box-shadow?用于向方框添加陰影

  div
  {
  box-shadow: 10px 10px 5px #888888;
  }

• border-image?使用圖片來創建邊框

  div
  {
  border-image:url(border.png) 30 30 round;  /*stretch為邊框拉伸，round是平鋪*/

  -moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */

?

     -webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */

?

?

      -o-border-image:url(border.png) 30 30 round; /* Opera */
     }

?

背景：

• background-size?規定背景圖片的尺寸,以像素或百分比規定尺寸
• background-origin?規定背景圖片的定位區域,可以放置于 content-box、padding-box 或 border-box 區域
• 可以放置多個背景

    body{ background-image:url(bg_flower.gif),url(bg_flower_2.gif);}

文本：

• text-shadow?向文本應用陰影，規定水平陰影、垂直陰影、模糊距離，以及陰影的顏色

  h1
  {
  text-shadow: 5px 5px 5px #FF0000;
  }

  

• word-wrap?允許文本強制進行換行 - 即使這意味著會對單詞進行拆分

  p {word-wrap:break-word;}

字體：

? ? ? @font-face 規則

<style> 
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),url('Sansation_Light.eot'); /* IE9+ */
}div
{
font-family:myFirstFont;
}
</style>

?

2D變化：

• translate()?元素從其當前位置移動，根據給定的 left（x 坐標） 和 top（y 坐標） 位置參數
• rotate()?元素順時針旋轉給定的角度。允許負值，元素將逆時針旋轉
• scale()?元素的尺寸會增加或減少，根據給定的寬度（X 軸）和高度（Y 軸）參數

  div
  {
  transform: scale(2,4);
  -ms-transform: scale(2,4);	/* IE 9 */
  -webkit-transform: scale(2,4);	/* Safari 和 Chrome */
  -o-transform: scale(2,4);	/* Opera */
  -moz-transform: scale(2,4);	/* Firefox */
  }  /*值 scale(2,4) 把寬度轉換為原始尺寸的 2 倍，把高度轉換為原始高度的 4 倍。

• skew()?元素翻轉給定的角度，根據給定的水平線（X 軸）和垂直線（Y 軸）參數
• matrix()?把所有 2D 轉換方法組合在一起,需要六個參數，包含數學函數，允許您：旋轉、縮放、移動以及傾斜元素

3D變化：

• rotateX()?元素圍繞其 X 軸以給定的度數進行旋轉
• rotateY()?元素圍繞其 Y 軸以給定的度數進行旋轉。

過渡：transition元素從一種樣式逐漸改變為另一種的效果,區別2D3D是過渡有一個變化過程

• 規定您希望把效果添加到哪個 CSS 屬性上
• 規定效果的時長

  div
  {
  transition: width 2s;
  -moz-transition: width 2s;	/* Firefox 4 */
  -webkit-transition: width 2s;	/* Safari 和 Chrome */
  -o-transition: width 2s;	/* Opera */
  }

  div:hover
  {
  width:300px;
  }/*當鼠標指針懸浮于 <div> 元素上時寬度變化，當指針移出元素時，它會逐漸變回原來的寬度*/

動畫：過渡設置元素屬性的變化過程，動畫可以設置自身屬性和元素所在位置的變化

@keyframes 規則用于創建動畫。在 @keyframes 中規定某項 CSS 樣式，就能創建由當前樣式逐漸改為新樣式的動畫效果。

@keyframes myfirst //動畫名稱 
{ 0% {background: red;} //各時刻變化的css樣式
  25% {background: yellow;} 
  50% {background: blue;} 
  100% {background: green;} 
}

div
{
animation: myfirst 5s;  //動畫名稱  動畫時間
-moz-animation: myfirst 5s;	/* Firefox */
-webkit-animation: myfirst 5s;	/* Safari 和 Chrome */
-o-animation: myfirst 5s;	/* Opera */
}

多列：

• column-count?規定元素應該被分隔的列數
• column-gap?規定列之間的間隔
• column-rule?設置列之間隔斷的寬度、樣式和顏色規則。

用戶界面：

• resize?規定是否可由用戶調整元素尺寸
• box-sizing?允許您以確切的方式定義適應某個區域的具體內容
• outline-offset?對輪廓進行偏移，并在超出邊框邊緣的位置繪制輪廓

div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}

?