經常使用CSS3屬性彙總

CSS3邊框

• border-radius 圓角邊框

  border-radius:25px;
  複製代碼

• box-shadow 邊框陰影

  box-shadow: h-shadow v-shadow blur spread color inset;
  複製代碼

  • h-shadow 必需。水平陰影的位置。容許負值。
  • v-shadow 必需。垂直陰影的位置。容許負值。
  • blur 可選。模糊距離。
  • spread 可選。陰影的尺寸。(blur模糊距離是算在盒子的長寬裏面的，spread陰影的尺寸會增大陰影盒子的長寬)
  • color 可選。陰影的顏色。請參閱 CSS 顏色值。
  • inset 可選。將外部陰影 (outset) 改成內部陰影。

• border-image 邊框圖片

  border-image 屬性是一個簡寫屬性，用於設置如下屬性：

  • border-image-source 邊框的圖片的路徑
  • border-image-slice 圖片邊框向內偏移
  • border-image-width 圖片邊框的寬度
  • border-image-outset 邊框圖像區域超出邊框的量
  • border-image-repeat 圖像邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)

CSS3背景

• background-clip 規定背景的繪製區域

  • border-box 背景被裁剪到邊框盒。
  • padding-box 背景被裁剪到內邊距框。
  • content-box 背景被裁剪到內容框。

• background-origin 規定 background-position 屬性相對於什麼位置來定位

  • padding-box 背景圖像相對於內邊距框來定位。
  • border-box 背景圖像相對於邊框盒來定位。
  • content-box 背景圖像相對於內容框來定位。

• background-size 規定背景圖像的尺寸

• CSS3 多重圖片

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

CSS3文本

• text-overflow 規定當文本溢出包含元素時發生的事情

  • clip 修剪文本。
  • ellipsis 顯示省略符號來表明被修剪的文本。
  • string 使用給定的字符串來表明被修剪的文本。

• text-shadow 向文本設置陰影

  text-shadow: h-shadow v-shadow blur color;
  複製代碼

  • h-shadow 必需。水平陰影的位置。容許負值。
  • v-shadow 必需。垂直陰影的位置。容許負值。
  • blur 可選。模糊的距離。
  • color 可選。陰影的顏色。

• white-space（不是css3屬性）

  • normal 默認。空白會被瀏覽器忽略。
  • pre 空白會被瀏覽器保留。其行爲方式相似 HTML 中的 pre標籤。
  • nowrap 文本不會換行，文本會在在同一行上繼續，直到遇到 br標籤爲止。
  • pre-wrap 保留空白符序列，可是正常地進行換行。
  • pre-line 合併空白符序列，可是保留換行符。
  • inherit 規定應該從父元素繼承 white-space 屬性的值。

CSS3字體

• @font-face 規則，使用方式：首先定義字體的名稱（好比 myFirstFont），而後指向該字體文件。

  如需爲 HTML 元素使用字體，請經過 font-family 屬性來引用字體的名稱 (myFirstFont)

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

CSS3 2D轉換

• 經過 CSS3 轉換，咱們可以對元素進行移動、縮放、轉動、拉長或拉伸。
• transform
  • translate(x, y) 方法，元素從其當前位置移動，根據給定的 left（x 座標） 和 top（y 座標） 位置參數
  • rotate(n deg) 方法，元素順時針旋轉給定的角度。容許負值，元素將逆時針旋轉。 （以旋轉元素中心爲旋轉點）
  • scale(x, y) 方法，元素寬高變化爲原始的倍數，根據給定的寬度（X 軸）和高度（Y 軸）參數
  • scale(x)
  • scale(y)

CSS3 3D轉換

• transform
  • rotateX(n deg) 方法，元素圍繞其 X 軸以給定的度數進行旋轉。
  • rotateY(n deg) 方法，元素圍繞其 Y 軸以給定的度數進行旋轉。
  • rotateZ(n deg) 方法，元素圍繞其 Z 軸以給定的度數進行旋轉。

CSS3 過渡

• 必須規定把過渡效果添加到哪一個CSS屬性上，而且規定效果的時長

• 如需向多個樣式添加過渡效果，請添加多個屬性，由逗號隔開

• 語法：transition: property duration timing-function delay;

  • transition-property 規定設置過渡效果的 CSS 屬性的名稱。

  • transition-duration 規定完成過渡效果須要多少秒或毫秒。

  • transition-timing-function 規定速度效果的速度曲線。

    transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic- bezier(n,n,n,n); 複製代碼

    • linear 以相同速度開始至結束的過渡效果（等於 cubic-bezier(0,0,1,1)） 。
    • ease 規定慢速開始，而後變快，而後慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
    • ease-in 以慢速開始的過渡效果（等於 cubic-bezier(0.42,0,1,1)）。
    • ease-out 規定以慢速結束的過渡效果（等於 cubic-bezier(0,0,0.58,1)）。
    • ease-in-out 以慢速開始和結束的過渡效果（等於 cubic-bezier(0.42,0,0.58,1)）。
    • cubic-bezier(n,n,n,n) 在 cubic-bezier 函數中定義本身的值。可能的值是 0 至 1 之間的數值。

  • transition-delay 定義過渡效果什麼時候開始。

CSS3 動畫

• @keyframes 規則用於建立動畫。在 @keyframes 中規定某項 CSS 樣式，就能建立由當前樣式逐漸改成新樣式的動畫效果。 請用百分比來規定變化發生的時間，或用關鍵詞 "from" 和 "to"，等同於 0% 和 100%。

  0% 是動畫的開始，100% 是動畫的完成。

  @keyframes myfirst
  {
  from {background: red;}
  to {background: yellow;}
  }
  複製代碼

• 經過animation屬性將動畫綁定到選擇器上

  div
  {
  animation: myfirst 5s;
  -moz-animation: myfirst 5s;	/* Firefox */
  -webkit-animation: myfirst 5s;	/* Safari 和 Chrome */
  -o-animation: myfirst 5s;	/* Opera */
  }
  複製代碼

  • 語法 animation: name duration timing-function delay iteration-count direction;
  • animation-iteration-count: n|infinite; 播放n次或者無限次
  • animation-direction: normal|alternate; 正常播放或者輪流反向播放

CSS3 多列

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

CSS3 用戶界面

• resize 屬性規定是否可由用戶調整元素尺寸

  resize: none|both|horizontal|vertical;
  複製代碼

• box-sizing 以確切的方式定義適應某個區域的具體內容

  content-box|border-box|inherit;
  複製代碼

• outline-offset 對輪廓進行偏移，並在超出邊框邊緣的位置繪製輪廓

  • 輪廓不佔用空間
  • 輪廓多是非矩形

  outline-offset: length|inherit;
  複製代碼