三年重構老司機二刷《css secrets》覺得有些東西還是應該記錄下來，本文內容來自書籍《css secrets》中文名叫《css揭秘》，做筆記的過程中我會根據自己的過往經驗加上自己的理解和看法，用通俗的表達對一些知識點進行解釋。本書的物件是有一定css開發經驗的人，如果你是新手，閱讀起來可能有點吃力，同時，筆記也是針對我個人的查漏補缺，有些知識點並不會記錄進去。
視覺效果
寬高相同，border-radius大於等於一半就是乙個正圓，使用者**會按寬高比例減小各個邊框半徑帶下，直到不重疊為止。
border-radius一般是簡寫形式，可以通過/單獨指定水平和垂直半徑，水平半徑 / 垂直半徑
border-radius接受百分比值
展開式屬性，支援最多兩個值，必須使用空格分隔。分別表示水平半徑和垂直半徑。而border-radius那種斜槓/分隔的寫法這裡是不支援的，只能是空格。
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-radius水平半徑 / 垂直半徑，各支援「上右下左」四個值寫法
border-radius: 左上角水平圓角半徑大小 右上角水平圓角半徑大小 右下角水平圓角半徑大小 左下角水平圓角半徑大小/左上角垂直圓角半徑大小 右上角垂直圓角半徑大小 右下角垂直圓角半徑大小 左下角垂直圓角半徑大小;border-radius: 50% / 100% 100% 0 0;左半橢圓
border-radius: 100% 0 0 100% / 50%;左上四分之一圓
平行四邊形是矩形的父集，各條邊兩兩平行，但是角度不一定是直角。
css建立平行四邊形的思路是通過skew實現。
直接將整個元素傾斜的話，元素的內容也會傾斜。
我們可以將內容單獨用一層結構包裹在傾斜元素內，然後將內容反向傾斜
按照這種思路我們可以將傾斜元素作為子元素，這樣就不會影響內容了，所以用偽元素代替是個好辦法
巢狀元素方案：
示例：href屬性可以建立乙個只有元素的部分區域可以顯示的剪下區域，mdn文件示例：="#yolo"
class
="button"
>
>
click mediv
>
a>
.button
.button > div 偽元素方案：
示例：變形方案：
基於上面平行四邊形的方案，菱形可以通過正方形旋轉得到，再將子元素反方向矯正，不過這裡有個問題是最大寬度是與邊長相等的，我們期望的是與對角線相等，所以我們可以通過放大來實現。
.picture > img 裁切路徑方案：
還有乙個相容性不是很好的實現方案，只能作為漸進增強的方案了。clip-path
還可以加動畫呢！
imgimg:hover
一般我們使用box-shadow的方法是，指定三個長度值和乙個顏色值：
box-shadow的引數列表是box-shadow: x y 模糊半徑r1 擴張半徑r2 顏色值;
所以上面的css屬性值會生成乙個相對於元素向右偏移2px，向下偏移3px，模糊半徑為4px的陰影，我們把陰影看做是乙個元素的話，這個元素的尺寸相當於比原來的元素大4*2=8px。
注意：確切地說，我們將在頂部看到1px的投影（4px-3px）、在左側看到2px（4px-2px）、在右側看到6px（4px+2px）、在底部看到7px（4px+3px）。在實踐中，投影看起來會比這些值稍小，因為投影的顏色在邊緣處的過渡不是線性的，這跟漸變不一樣。
如果要實現單側投影，我們就需要用到第四個屬性，擴張半徑啦。這個引數會根據你指定的值去擴大或（當指定負值時）縮小投影的尺寸。很顯然，當我們設定了模糊半徑之後，我們只有將擴張半徑設定為負數才能縮小陰影，那這個值具體是多大呢，只要小於模糊半徑的相反數就可以了，比如這樣設定：box-shadow: 0 5px 4px -4px black;。
要實現只在兩條鄰邊有box-shadow，最簡單的辦法就是在基礎用法上面將x和y的偏移量調整到大於模糊半徑的值就行，但是我們會發現這樣會造成元素有乙個比較大的陰影，視覺效果達不到要求，這時我們可以考慮結合擴張半徑屬性來進行優化，利用擴張半徑的負值來縮小陰影，具體數值該設定為多大呢，我們將偏移量調整為模糊半徑的一半，擴張半徑調整為模糊半徑相反數的一半，比如：box-shadow: 3px 3px 6px -3px black;就可以達到最終想要的效果了。
擴張半徑在四個方向上的作用是均等的（也就是說，我們無法指定投影在水平方向上放大，而在垂直方向上縮小），唯一的辦法是用兩塊投影（每邊各一塊）來達到目的。然後基本上就是把「單側投影」中的技巧運用兩次：box-shadow: 5px 0 5px -5px black, -5px 0 5px -5px black;。
CSS secrets 讀書筆記（1）
開頭先寫點別的，今天終於離開了生活了一年的國家。心裡有點對未來的期待，終於不是個學生了。出國一年，獲得的收穫可能就是終於想通了以後想幹什麼吧，人總要有一項技術傍身，進可成名立萬，退可養家餬口。今天登機前終於有一家投了簡歷的公司聯絡我了，也算乙個好訊息。前幾天發現了一本寫css很好的書，叫做css s...
《CSS Secrets》讀書筆記（1）
三年重構老司機二刷 css secrets 覺得有些東西還是應該記錄下來，本文內容來自書籍 css secrets 中文名叫 css揭秘 做筆記的過程中我會根據自己的過往經驗加上自己的理解和看法，用通俗的表達對一些知識點進行解釋。本書的物件是有一定css開發經驗的人，如果你是新手，閱讀起來可能有點吃...
讀書筆記3
1.資料治理的本質 資料治理的本質是組織對資料的可用性 完整性和安全性的整體管理。可用性指資料可用 可信且有質量保證，不會因為分析結果的準確性造成偏差，從業者可以放心地根據資料結果做業務決策 完整性分為兩個方面，一方面指資料需覆蓋各類資料應用的需要，另一方面指不會因為資料治理沒有到位而造成資料資產的...