1.關於CSS3

CSS3是CSS2的升級版本，3只是版本號，它在CSS2.1的基礎上增加了很多強大的新功能。目前主流瀏覽器chrome、safari、firefox、opera、甚至360都已經支持了CSS3大部分功能了，IE10以後也開始全面支持CSS3了。

文本，背景，動畫，2d 3d轉換伸縮佈局，多列布局

在編寫CSS3樣式時，不同的瀏覽器可能需要不同的前綴。它表示該CSS屬性或規則尚未成爲W3C標準的一部分，是瀏覽器的私有屬性，雖然目前較新版本的瀏覽器都是不需要前綴的，但爲了更好的向前兼容前綴還是少不了的。

前綴瀏覽器
-webkit chrome和safari
-moz firefox
-ms IE
-o opera

CSS3給我們帶來了什麼好處呢？簡單的說，CSS3把很多以前需要使用圖片和腳本來實現的效果、甚至動畫效果，只需要短短几行代碼就能搞定。比如圓角，圖片邊框，文字陰影和盒陰影，過渡、動畫等。CSS3簡化了前端開發工作人員的設計過程，加快頁面載入速度。

2：選擇器

CSS3新增了許多靈活查找元素的方法，極大的提高了查找元素的效率和精準度。CSS3選擇器與jQuery中所提供的絕大部分選擇器兼容。

2.1 屬性選擇器

其特點是通過屬性來選擇元素，具體有以下5種形式：

選擇器含義
E[attr] 存在attr屬性即可
E[attr=val] 屬性值完全等於val
E[attr*=val] 屬性值裏包含val字符並且在“任意”位置
E[attr^=val] 屬性值裏包含val字符並且在“開始”位置
E[attr$=val] 屬性值裏包含val字符並且在“結束”位置

選擇具有att屬性的E元素

選擇具有att屬性並且屬性值等於val的元素

2.2選擇器屬性

選擇具有att屬性且屬性值爲一用空格分隔的字詞列表，其中一個等於val的E元素（包含只有一個值且該值等於val的情況）

選擇具有att屬性且屬性值爲以val開頭的字符串的E元素。

選擇具有att屬性且屬性值爲以val結尾的字符串的E元素。

選擇具有att屬性且屬性值爲包含val的字符串的E元素。

2.2 僞類選擇器

以某元素（E）相對於其父元素或兄弟元素的位置來獲取無素；其元素必須與父元素匹配。

選擇器含義
E:first-child 其父元素的第1個子元素
E:last-child 其父元素的最後1個子元素
E:nth-child(n) 其父元素的第n個子元素
E:nth-last-child(n) 其父元素的第n個子元素(倒數)
E:nth-of-type(n) 同一父元素的第n個E元素

n遵循線性變化，其取值0、1、2、3、4、...

n可是多種形式：nth-child(2n+0)、nth-child(2n+1)、nth-child(-1n+3)等；

注：指E元素的父元素，並對應位置的子元素必須是E

li:first-child {
color: red;<sty
}
<ul>
<li>列表項一</li>
<li>列表項二</li>
<li>列表項三</li>
<li>列表項四</li>
</ul>
<ul>
<li>列表項一</li>
<li>列表項二</li>
<li>列表項三</li>
<li>列表項四</li>
</ul>

2.2.2、E:last-child：其父元素的最後一個子元素，且子元素必須是E
p:last-child{color:#f00;}

<div>
<h2>我是一個標題</h2>
<p>我是一個p</p>
</div>

2.2.3、E:nth-child(n)：其父元素的第n個子元素，且子元素必須是E
<style>
li:nth-child(2n){color:#f00;} /* 偶數 */
li:nth-child(2n+1){color:#000;} /* 奇數 */
</style>

<ul>
<li>列表項一</li>
<li>列表項二</li>
<li>列表項三</li>
<li>列表項四</li>
</ul>
因爲(n)代表一個乘法因子，可以是0, 1, 2, 3, ..., 所以(2n)換算出來會是偶數，而(2n+1)換算出來會是奇數

HTML示例代碼：

<div>
<p>第1個p</p>
<p>第2個p</p>
<span>第1個span</span>
<p>第3個p</p>
<span>第2個span</span>
<p>第4個p</p>
<p>第5個p</p>
</div>

CSS Case 1：
p:nth-child(2){color:#f00;}
很明顯第2個p會被命中然後變成紅色

CSS Case 2：
p:nth-child(3){color:#f00;}
這是會命中第3個p麼？如果你這麼認爲那就錯了，這條選擇符就不會命中任何一個元素。

CSS Case 3：
p:nth-child(4){color:#f00;}
這時你以爲會命中第4個p，但其實命中的卻是第3個p，因爲它是第4個子元素

2.2.4:E:nth-last-child(n) 其父元素的倒數第n個元素
<div>
<p>第1個p</p>
<p>第2個p</p>
<span>第1個span</span>
<p>第3個p</p>
<span>第2個span</span>
</div>
如上HTML，假設要命中倒數第一個p(即正數第3個p)，那麼CSS選擇符應該是：
p:nth-last-child(2){color:#f00;}
而不是：
p:nth-last-child(1){color:#f00;}
因爲倒數第1個p，其實是倒數第2個子元素。
2.2.5 nth-of-type(n)

odd 和 even 是可用於匹配下標是奇數或偶數的子元素的關鍵詞（第一個子元素的下標是 1）。
在這裏，我們爲奇數和偶數 p 元素指定兩種不同的背景色：
p:nth-of-type(odd)
{
background:#ff0000;
}
p:nth-of-type(even)
{
background:#0000ff;
}
實例 2
使用公式 (an + b)。描述：表示週期的長度，n 是計數器（從 0 開始），b 是偏移值。
在這裏，我們指定了下標是 3 的倍數的所有 p 元素的背景色：
p:nth-of-type(3n+0)
{
background:#ff0000;
}
2、空僞類
E:empty 選中沒有任何子節點的E元素；（使用不是非常廣泛）
p{
background: orange;
min-height: 30px;
}
p:empty {
display: none;
}
<p>我是一個段落</p>
<p> </p>
<p></p>

4、排除僞類
E:not選擇器稱爲否定選擇器，和jQuery中的:not選擇器一模一樣，可以選擇除某個元素之外的所有元素。就拿form元素來說，比如說你想給表單中除submit按鈕之外的input元素添加紅色邊框，CSS代碼可以寫成：
form {
width: 200px;
margin: 20px auto;
}
div {
margin-bottom: 20px;
}
input:not([type="submit"]){
border:1px solid red;
}

2.3僞元素選擇器

文本的第一個字母或字（如中文、日文、韓文等）
p {
width: 200px;
padding: 5px 10px;
border: 1px solid #ddd;
font: 14px/1.5 simsun;
}
p::first-letter {
float: left;
font-size: 40px;
font-weight: bold;
line-height: 1;
}
<h1>雜誌常用的首字下沉效果</h1>
<p>今天，陽光明媚，晴空萬里，非常適合戶外活動，如踏青、遠足之類的。長期坐在辦公室的同學們要多注意運動。</p>

2、E::first-line 文本第一行；
p {
width: 200px;
padding: 5px 10px;
border: 1px solid #ddd;
font: 14px/1.5 simsun;
}

p::first-line {
color: #090;
}
<h3>第一行文字的顏色與其它不同</h3>
<p>今天，陽光明媚，晴空萬里，非常適合戶外活動，如踏青、遠足之類的。長期坐在辦公室的同學們要多注意運動。</p>

3、E::selection 可改變選中文本的樣式；
p::selection {
background: #000;
color: #f00;
}
<h1>選中下面的文字，看看它的顏色</h1>
<p>你選中這段文字後，看看它們的文本顏色和背景色，就能明白::selection的作用。</p>

4、E::before和E::after
在E元素內部的開始位置和結束位創建一個元素，該元素爲行內元素，且必須要結合content屬性使用。
p::before {
background: #fff;
color: red;
content: "如果你的能看到這段文字，說明你的瀏覽器支持E:before和E::before";
font-size: 14px;
}

p::after {
background: #fff;
color: pink;
content: "如果你的能看到這段文字，說明你的瀏覽器支持E:after和E::after";
font-size: 14px;
}
<p>我是一個段落</p>
E:after、E:before 在舊版本里是僞元素，CSS3的規範裏“:”用來表示僞類，“::”用來表示僞元素，但是在高版本瀏覽器下E:after、E:before會被自動識別爲E::after、E::before，這樣做的目的是用來做兼容處理。
E:after、E:before後面的練習中會反覆用到，目前只需要有個大致瞭解
":" 與 "::" 區別在於區分僞類和僞元素

2.4顏色

顏色的表達方式 red、rgb() 、#ffff00

新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以設置顏色值的透明度，相較opacity，它們不具有繼承性，即不會影響子元素的透明度。
Red、Green、Blue、Alpha即RGBA
R、G、B 取值範圍0~255,A爲透明度參數，取值在0~1之間，不可爲負值。

Hue、Saturation、Lightness、Alpha即HSLA
不同的顏色表示方法其取值也不相同，具體如下：
H 色調取值範圍0~360，0/360表示紅色、120表示綠色、240表示藍色
S 飽和度取值範圍0%~100%
L 亮度取值範圍0%~100%
A 透明度取值範圍0~1
RGBA、HSLA可應用於所有使用顏色的地方。
background-color: rgba(100, 200, 20, 0.5);
background-color: hsla(100, 80%, 80%, 0.5);

關於CSS透明度：
1、opacity只能針對整個盒子設置透明度，子盒子及內容會繼承父盒子的透明度；
2 、transparent 不可調節透明度，始終完全透明
div {
background: red;
}

.test {
/* background: opacity;*/
background: transparent;
}

<div class="test">看看各帶color的屬性設置爲transparent時的效果</div>

p:nth-of-type(5) { visibility:hidden;} 隱藏，原來位置會被保留
p:nth-of-type(6){ display:none;} 隱藏，原來位置不會被保留

2.4 文本

1：text-overflow用來設置是否使用一個省略標記（...）標示對象內文本的溢出。

Font line-height text-indent（首行縮進） text-align：center text-decoration

text-indent：50px; 可以爲負值。

但是text-overflow只是用來說明文字溢出時用什麼方式顯示，要實現溢出時產生省略號的效果，還須定義強制文本在一行內顯示（white-space:nowrap）及溢出內容爲隱藏（overflow:hidden），只有這樣才能實現溢出文本顯示省略號的效果

2：文本陰影：

text-shadow可以用來設置文本的陰影效果。

語法：
text-shadow: X-Offset Y-Offset blur color;
X-Offset：表示陰影的水平偏移距離，其值爲正值時陰影向右偏移，反之向左偏移；
Y-Offset：是指陰影的垂直偏移距離，如果其值是正值時，陰影向下偏移，反之向上偏移；
Blur：是指陰影的模糊程度，其值不能是負值，如果值越大，陰影越模糊，反之陰影越清晰，如果不需要陰影模糊可以將Blur值設置爲0；有單位：px
Color：是指陰影的顏色，其可以使用rgba色。
比如，我們可以用下面代碼實現設置陰影效果。
.demo {
width: 340px;
padding: 30px;
font: bold 55px "微軟雅黑";
background: #C5DFF8;
text-shadow: 2px 2px 0 red;
}

2. 邊框

其中邊框圓角、邊框陰影屬性，應用十分廣泛，兼容性也相對較好，我們需要重點掌握。

1.圓角邊框

border-radius

圓角處理時，腦中要形成圓、圓心、橫軸、縱軸的概念，正圓是橢圓的一種特殊情況。如下圖

爲了方便表述，我們將四個角標記成1、2、3、4，如2代表右上角，CSS裏提供了border-radius來設置這些角橫縱軸半徑值。

支持簡寫模式，具體如下：

1、border-radius: 10px; 表示四個角的橫縱軸半徑都爲10px；

2、border-radius: 10px5px; 表示1和3角橫縱軸半徑都爲10px，2和4角橫縱軸半徑爲5px；

3、border-radius: 10px 5px8px; 表示1角模縱軸半徑都爲10px，2和4角橫縱軸半徑都爲5px，3角的橫縱軸半徑都爲8px；

4、border-radius: 10px 8px6px 4px; 表示1角橫縱軸半徑都爲10px，表示2角橫縱軸半徑都爲8px，表示3角橫縱軸半徑都爲6px，表示4角橫縱軸半徑都爲6px；

.circle {
width: 100px;
height: 100px;
background-color: aqua;
/* 四個圓角值都設置爲寬度或者高度的一半，顯示一個圓*/
border-radius:50%;/* 設置爲50%，顯示一個橢圓（寬高不一樣時）*/
border-radius: 50px;
}

.square {
width: 100px;
height: 100px;
background-color: aqua;
border-radius: 20px;
}

.irregular {
width: 100px;
height: 100px;
background-color: red;
/* 四個半徑值分別是左上角、右上角、右下角和左下角，順時針 */
border-radius: 10px 5px 20px 15px;
}
/* 上半圓，高度爲寬度的一半，邊框只加上半部分*/

.half-circle {
width: 100px;
height: 50px;
/* 空心 border: 1px solid red;*/
background-color: green;
border-radius: 50px 50px 0 0;
}

.left-circle {
width: 50px;
height: 100px;
background-color: gold;
border-radius: 50px 0 0 50px;
}

2. 邊框陰影

box-shadow

與文字陰影類似，可分別設置盒子陰影偏移量、模糊度、顏色（可設透明度）。

box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴展半徑] [陰影顏色] [投影方式];

如box-shadow: 5px 5px 5px #CCC

1、水平偏移量正值向右負值向左；

2、垂直偏移量正值向下負值向上；

3、模糊度是不能爲負值；

4、inset可以設置內陰影；

注：設置邊框陰影不會改變盒子的大小，即不會影響其兄弟元素的佈局。可以設置多重邊框陰影，實現更好的效果，增強立體感，實際開發中可以大膽使用。

/* 外陰影*/
.outset {
width: 100px;
height: 100px;
/* x 偏移量 y偏移量陰影模糊半徑陰影擴展半徑陰影顏色*/
box-shadow: 10px 2px 20px;
}

/* 內陰影*/
.inset {
width: 100px;
height: 100px;
/* x 偏移量 y偏移量陰影模糊半徑陰影擴展半徑陰影顏色*/
box-shadow: 10px 2px 20px inset;
}

/* 陰影x爲負數*/
.negative1 {
width: 100px;
height: 100px;
box-shadow: -10px 2px 6px red;
}
/* 陰影y爲負數*/
.negative2 {
width: 100px;
height: 100px;
box-shadow: 4px -10px 6px red;
}

/* 多陰影*/
.multi {
width: 100px;
height: 100px;
/*如果需要添加多個陰影只需要用逗號隔開*/
box-shadow: 4px 2px 20px red, -4px -2px 6px green, 0px 0px 12px 5px blue inset;
}

3. 漸變

漸變是CSS3當中比較豐富多彩的一個特性，通過漸變我們可以實現許多炫麗的效果，有效的減少圖片的使用數量，並且具有很強的適應性和可擴展性。1.1 線性漸變

linear-gradient線性漸變指沿着某條直線朝一個方向產生漸變效果，如下圖是從黃色漸變到綠色。

1、必要的元素：

a、方向

b、起始色

c、終止色

2、關於方向

設置漸變方向，可以用關鍵字如to top、to right，也可以用角度（正負值均可）如45deg、-90deg等，當以角度做爲參數時，可參照下圖來使用，0deg從下往上，90deg從左向右，進而可以推算出180deg從上向下。

/* 默認是從上到下的漸變*/
#grad {
height: 100px;
background: linear-gradient(red, blue);
}
/* 從左到右的漸變*/
#right-grad {
margin-top: 50px;
height: 100px;
background: linear-gradient(to right, red, blue);
}
/* 從左上角到右下角*/
#angles-grad {
margin-top: 50px;
height: 100px;
background: linear-gradient(to bottom right, red, green);
}
/* 多種顏色的漸變*/
#colorful-grad {
margin-top: 50px;
height: 100px;
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
/* 帶透明度漸變*/
#transparency-grad {
margin-top: 50px;
height: 100px;
background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 255, 0, 1));
}
/* 重複顏色的漸變*/
#repeat-grad {
margin-top: 50px;
height: 100px;
/*表示百分之10的地方是紅色，百分之30的地方是綠色*/
background: linear-gradient(to right, red 10%, green 30%);

4. 經向漸變

radial-gradient徑向漸變指從一箇中心點開始沿着四周產生漸變效果

徑向漸變由它的中心定義。

爲了創建一個徑向漸變，你也必須至少定義兩種顏色結點。顏色結點即你想要呈現平穩過渡的顏色。同時，你也可以指定漸變的中心、形狀（原型或橢圓形）、大小。默認情況下，漸變的中心是 center（表示在中心點），漸變的形狀是ellipse（表示橢圓形），漸變的大小是farthest-corner（表示到最遠的角落）。

寫在最後

關於漸變不同瀏覽器有不同的版本，即語法格式不一樣，我們以最新語法爲準，可自行查找資料瞭解即可。

#radial-grad {
margin-top: 50px;
height: 100px;
width: 200px;
background: radial-gradient(circle, red, yellow, green);
}
#radial-grad1 {
margin-top: 50px;
height: 100px;
width: 200px;
/*默認是橢圓的徑向*/
background: radial-gradient(ellipse, red 10%, green 30%, blue);
}

最後,文字跑馬燈效果

behavior屬性的參數值爲alternate、scroll、slide中的一個，分別表示文字來回滾動、單方向循環滾動、只滾動一次，需要注意的是：如果在<marquee>標籤中同時出現了direction和behavior屬性，那麼scroll和slide的滾動方向將依照direction屬性中參數的設置。

alternate	來回滾動
scroll	單方向循環滾動
slide	只滾動一次

bgcolor屬性-文字滾動範圍的背景顏色

direction屬性

文字滾動的方向，屬性的參數值有down、left、right、up共四個單一可選值，分別代表滾動方向向下、向左、向右、向上

width和height屬性

width和height屬性的作用決定滾動文字在頁面中的矩形範圍大小。width屬性用以規定矩形的寬度，height屬性規定矩形的高度。這兩個屬性的參數值可以是數字或者百分數，數字表示矩形所佔的（寬或高）像素點數，百分數表示矩形所佔瀏覽器窗口的（寬或高）百分比。如下所示：

loop屬性

loop屬性決定滾動文字的滾動次數，缺省是無限循環。參數值可以是任意的正整數，如果設置參數值爲-1或infinite時將無限循環。如下所示：

<marquee loop="infinite">我無限循環滾動。</marquee>

<marquee loop="-1">我無限循環滾動。</marquee>

crollamount和scrolldelay屬性

這兩個屬性決定文字滾動的速度（scrollamount）和延時（scrolldelay），參數值都是正整數。如下所示：

<marqueescrollamount="100">我速度很快.</marquee>

<marquee scrolldelay="30">我小步前進。</marquee>

<marquee scrolldelay="1000" scrollamount="100">我大步前進。</marquee>

CSS(5)__CSS基本用法