css揭秘--筆記（未完）

第0章 關於本書

1， 本書要用到一個工具函數————$$()，它可以讓我們更容易獲取和遍歷所有匹配特定css選擇符的dom元素：

1 function $$(selector,context){
2   context=context||document;
3   var elements=context.querySelectorAll(selector);
4   return Array.prototype.slice.call(elements);
5 }

2， 以下實現一個效果：

1 linear-gradient(#fff, #000);
2 linear-gradient(to bottom, #fff, #000);
3 linear-gradient(to top, #000, #fff);
4 linear-gradient(180deg, #fff, #000);
5 linear-gradient(to bottom, #fff 0%, #000 100%);

3， 檢查屬性是否存在：

1 var root=document.documentElement;
2 if('textShadow' in root.style){
3   root.classList.add('textShadow');
4 }else{
5   root.classList.add('no-textshadow');
6 }

    檢測多個屬性：

1 function testProperty(property){
2   var root=document.documentElement;
3   if(property in root.style){
4     root.classList.add(property.toLowerCase());
5     return true;
6   }
7   root.classList.add('no-'+property.toLowerCase());
8   return false;
9 }

    檢測某個具體的屬性值是否支持：

 1 function testValue(id,value,property){
 2   var dummy=document.createElement('p');
 3   dummy.style[property]=value;
 4   if(dummy.style[property]){
 5     root.classList.add(id);
 6     return true;
 7   }
 8   root.classList.add('no-'+id);
 9   return false;
10 }

第1章 前言

1， 不用-ms-border-radius和-o-border-radius，因為ie和opera從一開始就實現border-radius。
2， 儘量減少代碼重覆（DRY：don't repeat youself），在某些值相互依賴時，應把他們的相互關係用代碼表示出來。
例如：行高是字型大小的2倍，font-size:20px(可使用百分比和em);line-height:2;
推薦使用hsla而不是rgba來產生半透明白色，因為它的字元長度更短。
hsla（hue色調0-360，saturation飽和度0-100%，lightness亮度0-100%，alpha透明度0-1）。
代碼易維護和代碼量少不可兼得，如border-width。
currentColor顏色關鍵字，css有史以來第一個變數，如：hr{height:.5em,background:currentColor}。
3， 使用百分比長度來取代固定長度；
當需要在較大解析度下得到固定寬度時，使用max-width而不是width，因為它可以適應較小解析度；
不要忘記給替換元素設置一個max-width:100%;
當圖片以行列式佈局時，flexbox或display:inline-block可以實現。
4， 展開式寫法不會幫助你清空所有相關的其他屬性。可以組合使用簡寫和展開式。
預處理器缺點：css文件體積和複雜度可能會失控，調試難度增加，延時。
很多受預處理器啟發的特性已經融入到原生css中，如calc()，color()。
如：ul{--accent-color:red}
ol{--accent-color:blue}
li{background:var(--accent-color)} 這種在預處理器不能做到。

第2章 背景與邊框

1，半透明邊框：預設情況下，背景會延伸到邊框所在區域下麵。background-clip:border-box(背景被剪裁到邊框盒),padding-box(背景被剪裁到內邊框局), content-box(背景被剪裁到內容框)。
2，多重邊框：
box-shadow方案(水平位置，垂直位置，模糊度，陰影長度，顏色)，可以層層疊加。
outline方案，如果只需要兩層邊框，可以先常規邊框再加上outline；描邊的好處在於可以通過outline-offset控制它跟元素邊緣的距離可為負值。
3，靈活的背景定位：
background-position:right 20px bottom 10px;回退方案就是把bottom right寫入background，預設情況background-position是以padding-box為準的。
background-origin:content-box，此時背景圖片距離邊角的偏移量跟內邊距一致。
calc()方案：calc()內部的-和+運算符兩側各家一個空白符，否則會解析錯誤。
4，邊框內圓角：
可以用兩個元素，還可以用box-shadow（會跟圓角走）和outline（不會跟著圓角走）組合使用，且擴張半徑可以取圓角半徑的一半（(√2-1)r）。
5，水平條紋背景：

1 background:linear-gradient(#fb3,#58a);
2 background:linear-gradient(#fb3 20%,#58a 80%);/*頂部20%和底部20%是實色，中間漸變*/
3 background:linear-gradient(#fb3 50%,#58a 50%);background-size:100% 30px;/*創建條紋，改變百分數可以創建不等寬的條紋*/
4 background:linear-gradient(#fb3 33%,#58a 0,#58a 66%,yellowgreen 0);background-size:100% 30px;/*三條紋*/

    垂直條紋背景：

background:linear-gradient(to right,#fb3 50%,#58a 0);background-size:30px 100%;

    斜條紋背景：

1 background:linear-gradient(45deg,#fb3 25%,#58a 0,#58a 50%,#fb3 0,#fb3 75%,#58a 0);background-size:30px 30px;/*這樣才能無縫拼接*/
2 background:repeating-linear-gradient(60deg,#fb3,#fb3 50px,#58a 0,#58a 100px);/*色標無限迴圈，我們現在在漸變的色標中指定長度*/

    同色系條紋：

background:#58a;background-image:repeating-linear-gradient(30deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.1) 50px,transparent 0,transparent 100px);

6，網格：

background:#58a;background-image:linear-gradient(white 1px,transparent 0),linear-gradient(90deg,white 1px,transparent 0);background-size:20px 20px;

    波點：
    棋盤：
7，偽隨機背景：
8，連續的圖像邊框：

第3章 形狀

1，border-radius:50%/50%（百分比基於元素尺寸解析，水平、垂直），可以為四個角提供完全不同的水平和垂直半徑，如果提供三個值則第四個與第二個相同；如果兩個值則第三與第一相同；斜杠前後最多各有四個值。
2，平行四邊形：transform:skewX(-45deg);可使用嵌套元素或偽元素方案使內容垂直。
3，菱形：

1 transform:rotate(45deg) scale(1.42);/*可將圖片放正*/
2 -webkit-clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);/*不用兩層標簽就可將圖片放正並旋轉（clip-path不完全支持）*/
3 img{-webkit-clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);transition:1s -webkit-clip-path;}
4 img:hover{-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 100%);}/*圖片平穩過渡（當內邊距不夠寬時會裁掉文本）*/

4，切角效果：

1 background:linear-gradient(45deg,transparent 30px,#58a 0) left,linear-gradient(-45deg,transparent 30px,#666 0) right;
2 background-size:50% 100%;
3 background-repeat:no-repeat;

    弧形切角：

1 background:radial-gradient(circle at top left,transparent 30px,#58a 0) top left,radial-gradient(circle at top right,transparent 30px,#666 0) top right;
2 background-size:50% 100%;
3 background-repeat:no-repeat;/*（可用scss的mixin解決維護性，不會裁掉文本）*/

    內聯SVG與border-image解決方案。（文字會折行）
5，梯形標簽頁：
6，簡單的餅圖：

1 .pie{width:200px;height:200px;border-radius:50%;background:yellowgreen;background-image:linear-gradient(to right,transparent 50%,#666 0)}
2 .pie::before{content:'';display:block;margin-left:50%;height:100%;background-color:inherit;border-radius:0 100% 100% 0/50%;
3 transform-origin:left;animation:spin 3s linear infinite,bg 6s step-end infinite;}
4 @keyframes spin{to{transform:rotate(.5turn);}}
5 @keyframes bg{50%{background:#666;}}

第4章 視覺效果

1，單側投影：box-shadow: 0 10px 4px -4px black;只有底邊投影，第四個參數是擴張半徑，
雙側投影：box-shadow: 10px 0 6px -6px black,-10px 0 6px -6px black;
2，不規則投影：
3，染色效果：
基於濾鏡：-webkit-filter:{sepia(1) saturate(4) hue-rotate(295deg)};sepia是給圖片增加一種降飽和度的橙黃色染色效果，saturate提升飽和度，hue-rotate把每個像素的色相進行偏移。
基於混合模式：div{background:hsla(335,100%,50%)};img{mix-blend-mode:luminosity};保留上層元素的hsl亮度信息，並從它的下層吸取色相飽和度信息。
4，毛玻璃效果：-webkit-filter:blur(20px);
5，折角效果：

第5章 字體排印

1，連字元斷行：hyphens:manual(none auto);（chrome不支持，應在html標簽中指定lang屬性）
2，插入換行：dd::after{content:'\A';white-space:pre;}（不夠健壯）
dd + dt::before{content:'\A';white-space:pre;}
3，文本行的斑馬條紋：background-image:linear-gradient(rgba(0,0,0,.2) 50%,transparent 0);background-size:auto 3em(行高2倍);line-height:1.5;
4，調整tab寬度：pre標簽預設tab-size為8，可用tab-size縮進尺寸，不要用tab鍵縮進。
5，連字：font-variant-ligatures。
6，自定義下劃線：text-decoration或boder-bottom或box-shadow:0 -1px gray inset;
background: linear-gradient(gray, gray) no-repeat;background-size: 100% 1px;background-position: 0 1.02em;
7，現實中的文字效果：
凸版印刷效果：color:hsl(210,13%,30%);background:hsl(210,13%,60%);text-shadow:0 1px 1px hsla(0,0%,100%,0.8);在淺色背景使用深色文字時，
最終確定80%的不透明白色。如果對調，則用深色投影。
空心字效果：text-shadow:1px 1px black,-1px -1px black,1px -1px black,-1px 1px black;用svg效果更好，但得改html代碼。
文字外發光效果：text-shadow:0 0 .1em white,0 0 .3em white;
文字凸起效果：text-shadow: 0 1px hsl(0,0%,85%),0 2px hsl(0,0%,80%),0 3px hsl(0,0%,75%),0 4px hsl(0,0%,70%),0 5px hsl(0,0%,65%),0 5px 10px black;
環形文字效果：利用svg。

第6章 用戶體驗

1，選用合適的滑鼠游標：cursor。
2，擴大可點擊區域：Fitts法則認為：人類移動到某個目標區域所需的最短時間是目標距離和目標寬度之比所構成的對數函數。
border:10px solid transparent;background-cilp:padding-box;
3，自定義覆選框：利用偽元素美化其樣式（'\2714'對勾）
開關式按鈕：與覆選框類似。
4，通過陰影來弱化背景：
偽元素方案；
box-shadow方案（box-shadow:0 0 0 50vmax rgba(0,0,0,.8);）；
backdrop方案：dialog::backdrop{background:rgba(0,0,0,.8);}。
5，通過模糊來弱化背景：filter:blur(5px);
6，滾動提示：兩層背景，一層生成陰影，一層遮擋陰影的白色矩形。
7，互動式的圖片對比控制項：
CSS resize方案：resize:horizontal;
範圍輸入控制項方案：js控制input[type='range']。

第7章 結構與佈局

1，自適應內部佈局：
2，精確控製表格列寬：
3，根據兄弟元素的數量來設置樣式：
4，滿幅的背景，定寬的內容：
5，垂直居中：
6，緊貼底部的頁腳：

第8章 過渡與動畫

1，緩動效果：
彈跳動畫：css的調速函數是只有一個片段的貝塞爾曲線，因此每個調速函數只有兩個控制錨點。
cubic-bezier(x1,y1,x2,y2)函數允許我們指定自定義的調速函數，把控制錨點的水平坐標和垂直坐標互換就可得到反向版本。
彈性過渡：
2，逐幀動畫：
GIF不具備Alpha透明的特性，所以可以用合成png一幀幀顯示，然後可用steps()調速函數，如：animation:loader 1s infinite steps(8);
3，閃爍效果：動畫使其顏色變為transparent。
4，打字動畫：讓容器寬度成為動畫的主體（把所有文本包裹在這個容器中，然後讓它的寬度從0開始以步進動畫的方式一個字一個字的擴張到它的寬度）。
5，狀態平滑的動畫：
6，沿環形路徑平移的動畫：