css混合模式
css函式
text-transform:uppercase/capitalize/lowercase /none/inherit （大寫/首字母大寫/小寫/預設/繼承）
描述了元素的內容應該與元素的直系父元素的內容和元素的背景如何混合
語法：mix-blend-mod:
支援的值：
mix-blend-mode: normal; //正常
mix-blend-mode: multiply; //正片疊底
mix-blend-mode: screen; //濾色
mix-blend-mode: overlay; //疊加
mix-blend-mode: darken; //變暗
mix-blend-mode: lighten; //變亮
mix-blend-mode: color-dodge; //顏色減淡
mix-blend-mode: color-burn; //顏色加深
mix-blend-mode: hard-light; //強光
mix-blend-mode: soft-light; //柔光
mix-blend-mode: difference; //差值
mix-blend-mode: exclusion; //排除
mix-blend-mode: hue; //色相
mix-blend-mode: saturation; //飽和度
mix-blend-mode: color; //顏色
mix-blend-mode: luminosity; //亮度
mix-blend-mode: initial; //初始
mix-blend-mode: inherit; //繼承
mix-blend-mode: unset; //復原
注：元素應用混合模式，預設情況下，會混合z軸上所有層疊順序比其低的元素，可以用isolation:isolation進行阻斷（形成新的層疊上下文），只要元素可以建立層疊上下文，就可以阻斷mix-blend-mode(具體：
屬性值與上面一致，指的是背景層的與顏色的混合
定義了乙個貝塞爾曲線(cubic bezier)，將以一條直線放在範圍只有 1 的座標軸中，並從中間拿出兩個點來拉扯（x 軸的取值區間是 [0, 1]，y 軸任意），最後形成的曲線就是動畫的速度曲線。cubic-bezier() 可用於 animation-timing-function 和 transition-timing-function 屬性，p1(0,0),p3(1,1)是預設的，p1(x1,y1),p2(x2,y2)，x軸的取值必須在（0,1），y軸沒有限定
應用舉例：
transition: all 0.8s cubic-bezier(0.7, -0.5, 0.2, 2);
transition-timing-function:cubic-bezier(0,0,1,1)；（待補充各種效果的實現）
CSS3 總結（二十） 彈性盒子（CSS3）
2.在彈性容器中可以設定min width max width屬性來限制彈性子元素的最小及最大縮放寬度。用在彈性容器 3.flex direction 屬性 用在彈性容器 指定了彈性子元素在父容器中的位置。值說明 row橫向從左到右排列 左對齊 預設的排列方式。row reverse 反轉橫向排列 ...
CSS3基礎總結
1 css背景 background attachment 背景影象是否固定或者隨頁面其餘部分滾動 background color 背景顏色 background repeat 背景如何重複 background clip 規定背景的繪製區域 2 css文字 color 文字顏色 directio...
css3 動畫總結
在用css3建立動畫效果之前，首先要先了解下 keyframes 規則 keyframes 規則用於建立動畫。在 keyframes 中規定某項 css 樣式，就能建立由當前樣式逐漸改為新樣式的動畫效果。internet explorer 10 firefox 以及 opera 支援 keyfram...