CSS3

1.背景
- 1.1背景圖像區域（background-clip）
- 1.2背景圖像定位（background-origin）
- 1.3背景圖像大小（background-size）
- 1.3多重背景圖像
- 1.4 簡寫
2.漸變
- 2.1 線性漸變（linear-gradient(方向，顔色，顔色);）
- - 2.1.1上下漸變
  - 2.1.2左右漸變
  - 2.1.3對角漸變
  - 2.1.4角度漸變
  - 2.1.5漸變色節點控制
  - 2.1.6漸變色透明度
  - 2.1.7重複漸變（repeating-linear-gradient();）
- 2.2徑向（半徑）漸變（radial-gradient(顔色顔色);）
- - 2.2.1漸變基本文法
  - 2.2.2漸變的形狀
  - 2.2.3漸變的尺寸（值%看那個邊或角）
  - 2.2.4漸變的中心位置
  - 2.2.5重複漸變（ repeating-radial-gradient）
- 2.3 IE6-IE8漸變（用濾鏡）

1.背景

1.1背景圖像區域（background-clip）

文法

值

值	意
border-box	背景被裁剪到邊框
padding-box	背景被裁剪到内邊距
content-box	邊框被裁剪到内容

1.2背景圖像定位（background-origin）

文法

值

值	意
border-box	邊框處起定位
padding-box	内邊距處起定位
content-box	内容處起定位

配合前篇中的css背景中的1.5.

1.3背景圖像大小（background-size）

文法

有兩個值，寫一個值第二個值自動auto

值	意
1px	數值
100%	%
cover	縮放多餘裁剪。如何裁剪取決定位。
contain	縮放不裁剪，圖檔全顯示。

1.3多重背景圖像

文法

英文狀态下逗号隔開，誰在前誰顯示再前。

1.4 簡寫

文法順序

background：顔色位置尺寸填充樣式定位從哪裁剪圖檔狀态圖檔位址；

background：color position size repeat origin clip attachment image；

2.漸變

2.1 線性漸變（linear-gradient(方向，顔色，顔色);）

2.1.1上下漸變

文法

background:-webkit-linear-gradient(#f00,#00f);
background:   -moz-linear-gradient(#f00,#00f);
background:     -o-linear-gradient(#f00,#00f);
background:        linear-gradient(#f00,#00f);

不用寫方向直接寫顔色就行，顔色可是多個值。

2.1.2左右漸變

文法

background:-webkit-linear-gradient( left#f00,#00f);
background:   -moz-linear-gradient( right,#f00,#00f);
background:     -o-linear-gradient( right,#f00,#00f);
background:        linear-gradient(to right,#f00,#00f);

相容問題，不同核心不同寫法

2.1.3對角漸變

文法(如：左上到右下的寫法)

background:-webkit-linear-gradient( left top,#f00,#00f);
background:   -moz-linear-gradient( right bottom,#f00,#00f);
background:     -o-linear-gradient( right bottom ,#f00,#00f);
background:        linear-gradient(to right bottom,#f00,#00f);

2.1.4角度漸變

文法

background:-webkit-linear-gradient( 45deg,#f00,#00f);
background:   -moz-linear-gradient( 45deg,#f00,#00f);
background:     -o-linear-gradient( 45deg,#f00,#00f);
background:        linear-gradient( 45deg,#f00,#00f);

官方：

0deg 從下向上

90deg 從左向右

180deg 從上向下

-90deg 從右向左

webkit：

0deg 從左向右

90deg 從下向上

180deg 從右向左

-90deg 從上向下

== 帶有核心的寫到前面，預設寫在後邊，解決問題。==

2.1.5漸變色節點控制

文法

background:-webkit-linear-gradient( 45deg,#f00 10%,#00f 20%,#0f0);
background:   -moz-linear-gradient( 45deg,#f00 10%,#00f 20%,#0f0);
background:     -o-linear-gradient( 45deg,#f00 10%,#00f 20%,#0f0);
background:        linear-gradient( 45deg,#f00 10%,#00f 20%,#0f0);

第一個顔色值不寫節點度預設0%，最後一個則是100%

2.1.6漸變色透明度

文法

background:-webkit-linear-gradient( 45deg,#f00,#f000);
background:   -moz-linear-gradient( 45deg,#f00,#f000);
background:     -o-linear-gradient( 45deg,#f00,#f000);
background:        linear-gradient( 45deg,#f00,#f000);

我們可以用rgba的值來寫，第一種 rgba(255,255,255,1) 第二種 #FFFF

2.1.7重複漸變（repeating-linear-gradient();）

文法

background:-webkit-repeating-linear-gradient( 45deg,#f00 0%,#f000 20%);
background:   -moz-repeating-linear-gradient( 45deg,#f00 0%,#f000  20%);
background:     -o-repeating-linear-gradient( 45deg,#f00 0%,#f000  20%);
background:       repeating-linear-gradient( 45deg,#f00  0%,#f000  20%);

重複多少遍取決最後一個百分比

2.2徑向（半徑）漸變（radial-gradient(顔色顔色);）

從内向外漸變

2.2.1漸變基本文法

文法

background:-webkit-radial-gradient(#f00 10%,#00f 50%);
background:   -moz-radial-gradient(#f00 10%,#0f 50%);
background:     -o-radial-gradient(#f00 10%,#00f 50%);
background:        radial-gradient(#f00 10%,#00f 50%);

這裡面的%是中心點到邊界的長度%

2.2.2漸變的形狀

文法

background:-webkit-radial-gradient(circle,#f00 10%,#00f 50%);
background:   -moz-radial-gradient(circle,#f00 10%,#0f 50%);
background:     -o-radial-gradient(circle,#f00 10%,#00f 50%);
background:        radial-gradient(circle,#f00 10%,#00f 50%);

隻有兩個形狀圓（circle）和橢圓（ellipse），橢圓是預設值

2.2.3漸變的尺寸（值%看那個邊或角）

文法

background:-webkit-radial-gradient(closest-side circle,#f00 10%,#00f 50%);
background:   -moz-radial-gradient(closest-side circle,#f00 10%,#0f 50%);
background:     -o-radial-gradient(closest-side circle,#f00 10%,#00f 50%);
background:        radial-gradient(closest-side circle,#f00 10%,#00f 50%);

值	意
closest-side	最近邊
farthest-side	最遠邊
closest-corner	最近角
farthest-corner	最遠角

形狀和尺寸是一個屬性

2.2.4漸變的中心位置

文法

background:-webkit-radial-gradient(50% 30%,closest-side circle,#f00 10%,#00f 50%);
background:   -moz-radial-gradient(50% 30%,closest-side circle,#f00 10%,#0f 50%);
background:     -o-radial-gradient(50% 30%,closest-side circle,#f00 10%,#00f 50%);
background:        radial-gradient(50% 30%,closest-side circle,#f00 10%,#00f 50%);

第一個值左30% 第二個值上50%

2.2.5重複漸變（ repeating-radial-gradient）

文法*

background:-webkit-repeating-radial-gradient(50% 30%,closest-side circle,#f00 10%,#00f 50%);
background:   -moz-repeating-radial-gradient(50% 30%,closest-side circle,#f00 10%,#0f 50%);
background:     -o-repeating-radial-gradient(50% 30%,closest-side circle,#f00 10%,#00f 50%);
background:        repeating-radial-gradient(50% 30%,closest-side circle,#f00 10%,#00f 50%);

2.3 IE6-IE8漸變（用濾鏡）

文法

startColorstr 開始顔色

endColorstr 結束顔色

GradientType 漸變類型：值（0：線性上下|1：線性左右|2：第二個值到黑色，上下）

CSS3（背景和漸變）1.背景2.漸變