CSS3學習筆記

CSS3選擇器

屬性選擇器[ ]

E[attr]只使用屬性名，但沒有肯定任何屬性值

E[attr="value"]指定屬性名，並指定了該屬性的屬性值

E[attr~="value"]指定屬性名，而且具備屬性值，此屬性值是一個詞列表，而且以空格隔開，其中詞列表中包含了一個value詞，並且等號前面的「〜」不能不寫

E[attr^="value"]指定了屬性名，而且有屬性值，並且屬性值是以value開頭的

E[attr$="value"]指定了屬性名，而且有屬性值，並且屬性值是以value結束的

E[attr*="value"]指定了屬性名，而且有屬性值，並且屬值中包含了value

E[attr|="value"]指定了屬性名，而且屬性值是value或者以「value-」開頭的值（好比說zh-cn）（以value開頭不是）

IE7及以上支持;

<p miaov="leo">leo</p>
<p miaov="dp">杜鵬</p>

p[miaov]{background:red;} //兩個都變紅
p[miaov=leo]{background:red;} //只有leo都變紅

結構性僞類

E:nth-child(n) 匹配E標籤的父節點中的第n個子節點且要是類型爲E的節點

是從1開始算起，而不是0；
odd/even匹配奇/偶數；
()裏能夠計算； (3n)/(4n) ; n=1,2,3...

E:nth-last-child(n)匹配E父節點中的第n個字節點的節點，從後向前計算

E:nth-of-type(n) 匹配E父節點中的第n個類型爲E子節點

E:nth-last-of-type(n)匹配E父節點中的第n個類型爲E子節點,從後向前計算

E:empty匹配沒有子節點的類型爲E節點
注意：子節點包含文本節點

E:first-child 匹配E節點中的第一個子節點

等同於:first-child==:nth-child(1)

E:last-child 匹配E節點中的最後一個子節點

等同於:last-child==:nth-last-child(1)

E:first-of-type匹配E父節點中的第一個子節點且節點類型是E的節點

等同於:first-of-type==nth-of-type(1)

E:last-of-type 匹配E父節點中的最後一個子節點且節點類型是E的節點

等同於:last-of-type==nth-last-of-type(1)

E:only-child匹配E的父節點中只有一個子節點，並且類型爲E的惟一子節點
注意：子節點不包含文本節點

E:only-of-type 匹配E的父節點中惟一一個類型爲E的子節點（只有一個E節點，但能夠有多個子節點）

是表示一個節點他有不少個子節點，而其中只有一種類型的子節點是惟一的

注意：子節點不包含文本節點

僞類

E:target 匹配當前的URL片斷的元素類型，且這個元素必須是E

<a href="#div1">div1</a>
<a href="#div2">div2</a>
<div id="div1">div11</div>
<div id="div2">div22</div>
點擊a標籤後，URL會從 xxx.html 變成 xxx.html#div1（叫哈希值？），而後:target會匹配到這個#div1

div{display:none;}
div:target{ display:block;}
點擊a標籤顯示對應div

E:not(.box) 類名爲box的E節點不被匹配

E~F匹配E元素毗鄰的F元素

表單類：
E:disabled 匹配不可點擊的表單控件
E:enabled匹配可點擊的表單控件
E:checked匹配已選中的checkbox或radio(能夠與~配合使用)

文本類：
E:first-line 匹配E節點中的第一行
E:first-letter 匹配E節點中的第一個字符
E::selection匹配E節點在用戶選中文字時
E::before 生成內容在E節點前
E::after 生成內容在E節點後

selection必需要雙冒號，before/after能夠單冒號

新增顏色模式 RGBA

在RGB的基礎上增長了一個'A'值，表明AlphaA透明度

RGBA放到哪裏就哪裏透明；

color : rgba(255,255,255,0.5);//文字透明
border : rgba(255,255,255,0.5);//透明

RGBA能夠便捷地實現背景透明，裏面的文本不透明；
若是不用RGBA，就可能要用兩個層疊在一塊兒；

文字陰影 text-shadow

text-shadow：x y blur color;
x 橫向偏移
y 縱向偏移
blur 模糊距離
color 陰影顏色

陰影能夠疊加，用,隔開；
text-shadow：x1 y1 blur1 color1,x2 y2 blur2 color2;
注意：先渲染後面的，再渲染前面的，疊加太多層會致使很卡

文字描邊：-webkit-text-stroke:寬度 顏色
只支持webkit內核的瀏覽器；

新增文本功能

direction 定義文字排列方式(全兼容)

• Rtl 從右向左排列（右對齊）
• Ltr 從右向左排列（左對齊）

配合unicode-bidi 一塊兒使用後變成文字從左/右開始輸入；

p{direction:rtl;unicode-bidi:bidi-override;}
<p>妙味課堂</p>

顯示：堂課味妙

text-overflow 定義省略文本的處理方式

• clip 無省略號
• Ellipsis 省略號

注意配合overflow:hidden和white-space:nowrap一塊兒使用

自定義字體

@font-face {
    font-family: 'myFont';//字體名
    src: url('1-webfont.eot');
    src: url('1-webfont.eot?#iefix') format('embedded-opentype'),
         url('1-webfont.woff') format('woff'),
         url('1-webfont.ttf') format('truetype'),
         url('1-webfont.svg#untitledregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

用的時候就這樣用：

p{font-family:'myFont';}

用AI等軟件建立後字體包後，再轉換爲兼容的代碼就能夠用了；

轉換字體格式生成兼容代碼：fontsquirrel

彈性盒模型

千言萬語不如看文檔 MDN 使用CSS彈性盒子

新增UI樣式

圓角

border-radius
能夠有1~4個參數：

• 1個：都同樣
  border-radius: 同樣
• 2個：對角
  border-radius: 左上&右下 右上&左下
• 3個：斜對角
  border-radius: 左上 右上&左下 右下
• 4個：所有，順時針
  border-radius: 左上 右上 右下 左下

默認xy軸半徑同樣；

border-radius:10px/15px;
這種寫法是xy軸半徑不同，x軸爲10px，y軸爲15px；
/前是設置x軸，/後是設置y軸；
border-radius:10px 20px 30px 40px/15px 25px 35px 45px;

參數能夠是像素px或百分比%；

邊框圖片

border-image
能夠有如下參數：

• border-image-sourceg 引入圖片
• border-image-slice 切割圖片
• border-image-width 邊框寬度
• border-image-repeat 圖片的排列方式
  round 平鋪,repeat 重複,stretch拉伸
  其中round和repeat同樣的；

border-image-slice是把圖片切成九宮格，
九宮格的四個角填充到邊框對用的四個角，
中間一格正常不顯示，當使用了-webkit前綴時能夠顯示，填充到元素內容區（至關於背景了），
其他格默認拉伸顯示，能夠經過border-image-repeat設置；

這些參數能夠簡寫在border-image中：

-webkit-border-image:url(border.png) 27 27 round stretch;

一條邊框還能夠有多種顏色（只在火狐下實現了）：

-moz-border-left-colors:red blue yellow red blue yellow red blue yellow;
多少個顏色參數就多少個顏色；

更多詳細看 CSS3 border-image詳解、應用及jQuery插件

線性漸變

漸變能夠應用於任何使用背景圖片的地方。這意味着在CSS樣式中，漸變至關於背景圖片，在理論上可在任何使用url() 值的地方採用，好比最多見的background-image、list-style-type以及前面介紹的CSS3的圖像邊框屬性border-image。但直到目前爲止，僅在背景圖片中獲得最完美的支持。

linear-gradient([[<angle> | to <side-or-corner> ],]?<color-stop>[,<color-stop>]+)
最先支持CSS3漸變的是Webkit內核的瀏覽器，後來有W3C的標準語法，這裏寫的是標準語法；

• ：經過角度來肯定漸變的方向。0度表示漸變方向從下向上，90度表示漸變方向從左向右。若是取值爲負值，其角度按順時針方向旋轉。
• 關鍵詞：經過關鍵詞來肯定漸變的方向。好比「to top」、「to right」、「to bottom」和「to left」。這些關鍵詞對應的角度值爲「0deg」、「90deg」、「180deg」和「270deg」。除了使用「to top」、「top left」以外，還可使用「top left」左上角到右下角、「top right」左上角到右下解等。
• 第二個和第三個參數，表示顏色的起始點和結束點。你們能夠在從中插入更多的顏色值。

顏色值用RGBA時能夠設置透明度，同時能夠設置多個漸變顏色：

box{
  background-image:-webkit-linear-gradient(
    to left,
    rgba(255,0,0,0) 0%,
    rgba(255,0,198,0.8) 93%,
    rgba(255,0,198,0) 100%);
}

IE11下就不支持linear-gradient了，須要用這個方法實現，且顏色能有兩個，方向只有上到下和左到右：

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1');

除了線性漸變，還有徑向漸變、重複線性漸變和重複徑向漸變；

更多詳細請看 CSS3漸變——線性漸變

新增背景屬性

多背景

css3多重背景依然是不支持IE9如下系列版本。其餘高級瀏覽器都是支持的。

p{background:url(demo.gif) no-repeat ,url(demo1.gif) no-repeat left bottom, url(demo2.gif) no-repeat 10px 15px yellow;}

每一個背景用,隔開；

背景尺寸

background-size:length|percentage|cover|contain;

• length
  設置背景圖像的高度和寬度。
  第一個值設置寬度，第二個值設置高度。
  若是隻設置一個值，則第二個值會被設置爲 "auto"。
• percentage
  以父元素的百分比來設置背景圖像的寬度和高度。
  第一個值設置寬度，第二個值設置高度。
  若是隻設置一個值，則第二個值會被設置爲 "auto"。
  測試
• cover
  把背景圖像擴展至足夠大，以使背景圖像徹底覆蓋背景區域。
  背景圖像的某些部分也許沒法顯示在背景定位區域中。
  測試
• contain
  把圖像圖像擴展至最大尺寸，以使其寬度和高度徹底適應內容區域。

背景定位

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

background-origin: padding-box|border-box|content-box;

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

注意：若是背景圖像的background-attachment屬性爲 "fixed"，則該屬性沒有效果。

背景裁切

屬性規定背景的繪製區域。

background-clip: border-box|padding-box|content-box;

• border-box
  背景被裁剪到邊框盒。（默認值）
• padding-box
  背景被裁剪到內邊距框。
• content-box
  背景被裁剪到內容框。

IE下還有一個text的屬性，只顯示文字區的內容，其餘被裁切：-webkit-background-clip:text;

遮罩

-webkit-mask-image
-webkit-mask-position
-webkit-mask-repeat
webkit下有這三個屬性能夠實現遮罩，其餘內核也有本身的實現方法；

過渡 transition

過渡transition是一個複合屬性，包括下面這四個子屬性：

• transition-property
  過渡屬性(默認值爲all)
• transition-duration
  過渡持續時間(默認值爲0s)
• transiton-timing-function
  過渡函數(默認值爲ease函數)
• transition-delay
  過渡延遲時間(默認值爲0s)

過渡transition的這四個子屬性只有transition-duration是必需值且不能爲0。
其中，transition-duration和transition-delay都是時間。
當兩個時間同時出現時，第一個是transition-duration，第二個是transition-delay；
當只有一個時間時，它是transition-duration，而transition-delay爲默認值0；

transition-property:

• none: 沒有指定任何樣式
• all: 默認值，表示指定元素全部支持transition-property屬性的樣式
• transition-property: 可過渡的樣式，可用逗號分開寫多個樣式

transition:width 3s, background 3s;

注意：不是全部的CSS樣式值均可以過渡，只有具備中間值的屬性才具有過渡效果

transition-delay和transition-duration:

• 該屬性不能爲負值
• 若該屬性爲0s則爲默認值，若爲0則爲無效值。因此必須帶單位
• 該值爲單值時，即全部過渡屬性都對應一樣時間；該值爲多值時，過渡屬性按照順序對應持續時間

transition-timing-function:
過渡時間函數用於定義元素過渡屬性隨時間變化的過渡速度變化效果。

過渡時間函數共三種取值，分別是關鍵字、steps函數和bezier函數；

• steps函數 點擊看參數
  steps步進函數將過渡時間劃分紅大小相等的時間時隔來運行

• bezier(貝塞爾)曲線
  貝塞爾曲線經過p0-p3四個控制點來控制，其中p0表示(0,0)，p3表示(1,1)
  可經過 網站 生成

• 關鍵字 實際上是bezier函數或steps函數的特殊值
  ease：（快慢快）默認值
  linear：（勻速）
  ease-in：(加速)
  ease-out：（減速）
  ease-in-out：（和ease相似，但比ease幅度大）
  step-start: 直接位於結束處。至關於steps(1,start)
  step-end: 位於開始處通過時間間隔後結束。至關於steps(1,end)

steps步進函數爲:
steps(<integer>[,start | end]?)
<integer>:用來指定間隔個數(該值只能是正整數)
第二個參數: 該參數可選，默認是end，表示開始值保持一次；若參數爲start，表示開始不保持點擊返回

transition的多個屬性值用逗號分隔開表示能夠同時爲多個值設置過渡屬性：

#test1{
    transition-property: width,background,opacity;
    transition-duration: 2s,500ms;
    transition-timing-function: linear,ease;
    transition-delay: 200ms,0s;
}
/*相似於*/
#test2{
    transition: width 2s linear 200ms,background 500ms ease 0s,opacity 2s linear 200ms;
}

觸發方式
通常地，過渡transition的觸發有三種方式，分別是僞類觸發、媒體查詢觸發（@media觸發）和javascript觸發。

過渡完成事件
當過渡完成後執行的事件，相似於回調函數；

Webkit內核： obj.addEventListener('webkitTransitionEnd',function(){},false);
firefox(標準下): obj.addEventListener('transitionend',function(){},false);

更多看 深刻理解CSS過渡transition

2D變形 transform

變形transform是一些效果的集合，主要是移動、旋轉、縮放和傾斜這四種基本操做，還能夠經過設置matrix矩陣來實現更復雜的效果。變形transform能夠實現2D和3D兩種效果。2D變形涉及的屬性主要有transform變形函數和transform-origin變形原點。

注意：transform只能應用於: 非inline元素(包括block、inline-block、table、table-cell等)；

變形原點(2維)
變形原點transform-origin是指變形操做所依據的基點。默認狀況下，變形原點位於元素的中心點；
transform-origin
只能應用於: 非inline元素(包括block、inline-block、table、table-cell等)；

2維的變形原點transform-origin是由x軸和y軸兩個軸的值共同肯定的(不考慮3維的狀況，z軸的值默認爲0)，
有關鍵字、數值和百分比三種取值：

• 關鍵字
  x軸：left: 0% center: 50% right: 100%；
  y軸：top: 0% center: 50% bottom: 100%；
• 數值
  x軸數值表示在x軸上離0點(元素邊框外側左上角)的偏移量；
  y軸數值表示在y軸上離0點的偏移量；
• 百分比
  x軸的百分比相對於元素的寬度和(width+橫向padding+橫向border)，即包含塊的寬度；
  y軸的百分比相對於元素的高度和(height+縱向padding+縱向border)，即包含塊的高度；
• 單個值
  當只有一個值時，默認第二個值爲center；

變形函數(2維)
變形transform是一系列變形函數的集合
transform有如下函數：

• translate() 位移函數
• scale() 縮放函數
• rotate() 旋轉函數
• skew()傾斜函數

注意：位移、縮放、旋轉和傾斜這四個操做中除了位移與變形原點無關，其他三個都與變形原點有關；

下面詳解各個函數：
位移
translate位移函數可使元素從原來的位置上移動指定的位移。涉及位移的2d函數共3種，分別是translate()、translateX()、translateY()

注意：元素髮生位移後，元素的x軸和y軸跟着也一併移動，若元素再進行其餘的變形操做，則要沿着改變後的x軸和y軸進行變形；

位移函數至關於matrix(1,0,0,1,x,y)；

位移函數還能夠接受百分比。其中x%相對於元素水平方向的寬度和，y%相對於元素垂直方向的高度和；
注意：IE10瀏覽器有bug，元素的位移函數的百分比是相對於元素的可視寬高(不包括邊框)而言的；

縮放
scale縮放函數可讓元素根據變形原點進行縮放，默認縮放值爲1。涉及縮放的2d函數共3種，分別是scale()、scaleX()、scaleY()

注意：當元素被縮放後，若元素要進行位移，數值類型的位移值要乘以該縮放比例；百分比類型的位移值乘以原來的寬度和或高度和轉換成數值類型後，再乘以縮放比例；

縮放函數至關於matrix(x,0,0,y,0,0)；

傾斜
skew傾斜函數可讓元素以其變形原點圍繞x軸和y軸進行必定角度的傾斜。涉及傾斜的2d函數共3種，分別是skew()、skewX()、skewY()

注意：元素傾斜後，x軸和y軸發生傾斜，若元素要進行其餘變形操做，則沿着傾斜後的x軸和y軸進行變形

傾斜函數至關於matrix(1,tany,tanx,1,0,0)；

旋轉
rotate旋轉函數可讓元素經過指定的角度(deg)根據變形原點進行順時針旋轉，默認爲0deg。與skew不一樣的是，rotate不會改變元素的形狀。涉及到旋轉的2d函數只有一個，就是rotate()

注意：元素旋轉後，元素的x軸和y軸也跟着發生旋轉。若元素要進行其餘變形操做，則沿着旋轉後的x軸和y軸進行變形

旋轉函數至關於matrix(cosx,sinx,-sinx,cosx,0,0)；

多值
transform變形能夠接受多值，出現多個變形函數時用空格分隔，而且按照從前日後的順序執行。

若是變形函數不是以多值的形式，多個變形函數的前後關係能夠經過多個元素的嵌套關係體現：

<div style="transform:rotate(45deg) translateX(100px)"></div>
至關於
<div style="transform:rotate(45deg)">
  <div style="transform:translateX(100px)"></div>
</div>

更多看 CSS變形transform(2d)

3D變形 transform

3D變形 transform 和2D的基本同樣，但要先設置變形樣式爲3D:transform-style:preserve-3d;

此外還比2D變形多了一個perspective屬性；
perspective 屬性定義 3D 元素距視圖的距離，以像素計。

目前瀏覽器都不支持 perspective 屬性。
Chrome 和 Safari 支持替代的-webkit-perspective屬性。

注意：perspective 屬性隻影響 3D 轉換元素。

同時能夠設置景深基點Perspective- origin，有如下三個屬性：

• right
• left
• center

動畫 animation

經過 CSS3，咱們可以建立動畫，這能夠在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。

如需在 CSS3 中建立動畫，您須要學習@keyframes(關鍵幀) 規則。

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

當您在@keyframes 中建立動畫時，請把它捆綁到某個選擇器，不然不會產生動畫效果。

經過規定至少如下兩項 CSS3 動畫屬性，便可將動畫綁定到選擇器：

• 規定動畫的名稱
• 規定動畫的時長

把 "myfirst" 動畫捆綁到 div 元素，時長：5 秒：
div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;    /* Firefox */
-webkit-animation: myfirst 5s;    /* Safari 和 Chrome */
-o-animation: myfirst 5s;    /* Opera */
}

注意：您必須定義動畫的名稱和時長。若是忽略時長，則動畫不會容許，由於默認值是 0。

關鍵幀的時間單位：

• 百分比：0%、25%、100%等
• 字符：from(0%)、to(100%)

有如下幾個屬性：

• animation 全部動畫屬性的簡寫屬性，除了 animation-play-state 屬性。
• animation-name 規定 @keyframes 動畫的名稱。
• animation-duration 規定動畫完成一個週期所花費的秒或毫秒。默認是 0。
• animation-timing-function 規定動畫的速度曲線。默認是 "ease"。
• animation-delay 規定動畫什麼時候開始。默認是 0。
• animation-iteration-count 規定動畫被播放的次數。默認是 1。
• animation-direction 規定動畫是否在下一週期逆向地播放。默認是 "normal"。
• animation-play-state 規定動畫是否正在運行或暫停。默認是 "running"。
• animation-fill-mode 規定對象動畫時間以外的狀態。