css3簡記，瞭解一下？

0、前言

css3經常使用屬性在用的時候總有那麼一兩點記不住，每次去搜教程，重複作功，本身動手，在這簡記一下，加深印象。

一、css3圓角border-radius (IE9+)

使用 CSS3 border-radius 屬性，你能夠給任何元素製做 "圓角"。若是你要在四個角上一一指定，能夠使用如下規則：

• 四個值: 第一個值爲左上角，第二個值爲右上角，第三個值爲右下角，第四個值爲左下角；
• 三個值: 第一個值爲左上角, 第二個值爲右上角和左下角，第三個值爲右下角；
• 兩個值: 第一個值爲左上角與右下角，第二個值爲右上角與左下角；
• 一個值：四個圓角值相同；

用純css3寫一個Opera瀏覽器logo，

.opera-outer {
    width: 258px;
    height: 278px;
    background-color: #f22629;    
    border-radius: 129px/139px;
    position: relative;
}
.opera-inner {
    width: 116px;
    height: 236px;
    background-color: #fff;    
    border-radius: 58px/118px;
    position: absolute;
    left: 70px;
    top: 20px;
}

get到知識點：
border-radius: 129px/139px;這種寫法，129px是橢圓水平半徑，139px是橢圓垂直半徑。當橢圓半徑和超出寬高時，會自動縮放橢圓以知足鑲嵌在矩形裏。

二、css3背景

2.1 background-image （ie9+）

添加多背景圖片

background: url( "../image/img_flwr.gif" ) right bottom no-repeat, url("../image/paper.gif") left top repeat;

等價於

background-image: url("../image/img_flwr.gif"), url("../image/paper.gif");
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;

2.2 background-orign（ie9+）

指定了背景圖像的位置區域，取值：border-box，padding-box，content-box。

2.3 background-clip（ie9+）

背景剪裁屬性是從指定位置開始繪製，取值：border-box，padding-box，content-box。

綜合知識點繪製以下

background: url( "../image/img_flwr.gif" ) right bottom no-repeat, url("../image/paper.gif") left top repeat;
border: 20px solid rgba( 0, 0, 0, 0.1 );
padding: 20px;
background-origin: border-box;
background-clip: content-box;

三、css3漸變 linear-gradient (IE10+)

3.1 默認從上到下漸變

#grad {
  background: -webkit-linear-gradient(red, yellow); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(red, yellow); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(red, yellow); /* Firefox 3.6 - 15 */
  background: linear-gradient(red, yellow); /* 標準的語法 */
}

3.2 從左向右漸變

#grad {
  background: -webkit-linear-gradient(left, red, yellow); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(left, red, yellow); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(left, red, yellow); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, red, yellow); /* 標準的語法 */
}

3.3 有角度的變換

#grad {
  background: -webkit-linear-gradient(90deg, red, yellow); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(90deg, red, yellow); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(90deg, red, yellow); /* Firefox 3.6 - 15 */
  background: linear-gradient(90deg, red, yellow); /* 標準的語法 */
}

3.4 對角線

#grad {
  background: -webkit-linear-gradient(left top, red, yellow); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(left top, red, yellow); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(left top, red, yellow); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right bottom, red, yellow); /* 標準的語法 */
}

3.5 重複線性漸變 repeating-linear-gradient

#grad {
  /* Safari 5.1 - 6.0 */
  background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Opera 11.1 - 12.0 */
  background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Firefox 3.6 - 15 */
  background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* 標準的語法 */
  background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

3.6 徑向漸變 radial-gradient

#grad {
  /* Safari 5.1 - 6.0 */
  background: -webkit-radial-gradient(circle, red 5%, yellow 15%, green);
  /* Opera 11.1 - 12.0 */
  background: -o-radial-gradient(circle, red 5%, yellow 15%, green);
  /* Firefox 3.6 - 15 */
  background: -moz-radial-gradient(circle, red 5%, yellow 15%, green);
  /* 標準的語法 */
  background: radial-gradient(circle, red 5%, yellow 15%, green);
}

3.7 重複徑向漸變 repeating-radial-gradient

#grad {
  /* Safari 5.1 - 6.0 */
  background: -webkit-repeating-radial-gradient(red, yellow 5%, green 10%);
  /* Opera 11.1 - 12.0 */
  background: -o-radial-repeating-gradient(red, yellow 5%, green 10%);
  /* Firefox 3.6 - 15 */
  background: -moz-radial-repeating-gradient(red, yellow 5%, green 10%);
  /* 標準的語法 */
  background: repeating-radial-gradient(red, yellow 5%, green 10%);
}

四、css3文本效果

4.1 text-shadow (IE10+)

text-shadow: 4px 4px 4px #F00; (x軸偏移量，y軸偏移量，陰影模糊半徑，陰影顏色)

4.2 box-shadow (IE9+)

box-shadow: 0px 0px 4px 4px #ccc;(x軸偏移量，y軸偏移量，陰影模糊半徑，陰影拓展半徑，陰影顏色)

多個陰影之間用逗號分隔
box-shadow: 0px -4px 4px 0px black,0px 4px 4px 0px red,4px 0px 4px 0px green,-4px 0px 4px 0px blue;

注意，當有兩個陰影重疊時，在前面設置陰影在上層

在低版本的ie下使用shadow濾鏡，filter:progid:DXImageTransform.Microsoft.Shadow(color=’顏色值’, Direction=陰影角度（數值）,Strength=陰影半徑（數值）);

注意：該濾鏡必須配合background屬性一塊兒使用，不然該濾鏡失效。

4.3 text-overflow (IE9+)

指定應向用戶如何顯示溢出內容

overflow: hidden;
text-overflow: ellipsis; /* clip */
white-space: nowrap; /*文本在同一行，直到有<br>標籤*/
/*可能取值：normal默認換行，空白忽略， pre行爲相似標籤pre，nowrap不換行，pre-wrap空白換行，pre-line合併空格換行*/

4.4 word-wrap break-word

word-wrap: break-word; /* 容許長文本換行 */
break-word: all-break; /* 容許單詞拆分換行 */

五、css3 2D轉換 (IE10+ IE9 -ms)

5.1 translate 偏移

IE9須要-ms前綴，Safari和chrome須要-webkit前綴

transform: translate(<length>[, <length>]); // 第一個參數x方向長度，第二個參數y方向長度
transform: translateX(<length>);
transform: translateY(<length>);

5.2 rotate 旋轉

transform: rotate(ndeg);

5.3 scale 縮放

transform: scale(<number>[, <number>]);
transform: scaleX(<number>);
transform: scaleY(<number>);

5.4 skew 傾斜

transform: skew(<angle> [, <angle>]);
transform: skewX(<angle>);
transform: skewY(<angle>);

5.5 matrix 矩陣轉換

matrix(<number>,<number>,<number>,<number>,<number>,<number>)：
以一個含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個2D變換，至關於直接應用一個[a,b,c,d,e,f]變換矩陣

六、css3 3D轉換 (IE10+)

6.1 rotateX 繞x軸旋轉

transform: rotateX(ndeg);

6.2 rotateY繞y軸旋轉

transform: rotateY(ndeg);

七、css3 過渡 transition(IE10+)

css3過渡是元素從一種樣式逐漸改變爲另外一種的效果。要實現這一點，必須規定兩項內容：指定添加效果的css屬性，指定效果的持續時間。

transition-property：
檢索或設置對象中的參與過渡的屬性

transition-duration：
檢索或設置對象的持續時間

transition-timing-function：
檢索或設置對象中過渡的動畫類型

transition-delay：
檢索或設置對象延遲過渡的時間

For Example：
能夠爲同一個元素的多個屬性定義過渡效果
縮寫：

transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;

等價拆分：

transition-property:border-color,background-color,color;
transition-duration:.5s;
transition-timing-function:ease-in;
transition-delay:.1s;

過渡類型

• linear：

線性過渡。等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0)

• ease：

平滑過渡。等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0)

• ease-in：

由慢到快。等同於貝塞爾曲線(0.42, 0, 1.0, 1.0)

• ease-out：

由快到慢。等同於貝塞爾曲線(0, 0, 0.58, 1.0)

• ease-in-out：

由慢到快再到慢。等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)

• step-start：

等同於 steps(1, start)

• step-end：

等同於 steps(1, end)

• steps(<integer>[, [ start | end ] ]?)：

接受兩個參數的步進函數。第一個參數必須爲正整數，指定函數的步數。第二個參數取值能夠是start或end，指定每一步的值發生變化的時間點。第二個參數是可選的，默認值爲end。

• cubic-bezier(<number>, <number>, <number>, <number>)：

特定的貝塞爾曲線類型，4個數值需在[0, 1]區間內

八、css3 動畫animation (IE10+)

8.1 @keyframes

要建立css3動畫，@keyframes是必不可少的，它用來指定一個css樣式和動畫將逐步從目前的樣式更改成新的樣式。

@keyframes mykeyfreames {
form: {},
to: {}
}

8.2 animation

動畫是使元素從一種樣式逐漸變化爲另外一種樣式的效果。您能夠改變任意多的樣式任意多的次數。請用百分比來規定變化發生的時間，或用關鍵詞 "from" 和 "to"，等同於 0% 和 100%。0% 是動畫的開始，100% 是動畫的完成。爲了獲得最佳的瀏覽器支持，您應該始終定義 0% 和 100% 選擇器。

• animation-name:

檢索或設置對象所應用的動畫名稱

• animation-duration:

檢索或設置對象動畫的持續時間

• animation-timing-function:

檢索或設置對象動畫的過渡類型

• animation-delay:

檢索或設置對象動畫延遲的時間，默認爲0

• animation-iteration-count:

檢索或設置對象動畫的循環次數，無限次 definite

• animation-direction:

檢索或設置對象動畫在循環中是都反向運動，
取值：normal, reverse(反向播放), alternate(奇數次正向播放，偶數次反向播放), alternate-reverse(奇數次反向播放，偶數次正向播放)

• animation-play-state:

檢索或設置對象動畫的狀態，w3c考慮移除

九、結合transition,box-shadow,translate寫一個iphone-switch

/* css */
/* 開關按鈕背景 */
.iphone-switch {
    display: inline-block;
    width: 42px;
    height: 20px;
    border: 1px solid #aaa;
    border-radius: 10px;
    background-color: #eee;
     -webkit-box-shadow: inset 0 0 0 0 #ddd;
    box-shadow: inset 0 0 0 0 #ddd;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
/* 用僞元素:before作開關 */
.iphone-switch:before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background-color: #fff;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}

.iphone-switch.checked {
 -webkit-box-shadow: inset 0 0 0 10px #4bed90; 
    box-shadow: inset 0 0 0 10px #4bed90; 
}

.iphone-switch.checked:before {
    -webkit-transform: translate(22px, 0px);
    transform: translate(22px, 0px);
}

// js
$( ".iphone-switch" ).click( function() {
    $(this)[ $(this).hasClass( "checked" ) ? "removeClass" : "addClass" ]( "checked" );
} );

完~