css-secrets (css揭祕) 知識點目錄，值得深刻學習！

1. 第一章

css編碼技巧

第二章 邊框與背景

• 半透明邊框
  hsla
• 多重邊框
  box-shadow outline
• 靈活的背景定位
  background-position css3該屬性能夠指定偏移量，////background-origin 指定背景圖片相對於哪個角進行偏移，和padding搭配使用////calc()方法的使用，calc(100% - 偏移量) 搭配background-position使用
• 邊框內圓角
  一個元素box-shadow outline 結合使用 注意： 大小問題，勾股定理////兩個元素能夠經過背景色出效果
• 條紋背景

linear-gradient background-size 搭配使用////傾斜條紋使用repeating-lineat-gradient////靈活的同色繫條紋，background和background-image搭配使用

• 複雜的背景圖案

（1）網格中的方格用background和background-image， background-size搭配使用，background-image中有多個line-gradient 以逗號分隔，搭配使用，/////

（2）相似於輔助線，background、background-image和background-size搭配使用

//////（3）波點 background和background-image， background-size、background-position 搭配使用，能夠利用兩個疊加造成更好看的/////


(4)棋盤，使用三角形拼接造成

• 僞隨機背景

background和background-image， background-size搭配使用， 蟬原則，根據質數設置background-size,

• 連續的圖像邊框

兩種方法

上述方法能夠衍生出「螞蟻行軍」

！！注意斜紋變虛線，理解background-position百分比的含義；

頂部邊框裁切

第三章 形狀

• 自適應的橢圓

半橢圓

四分之一橢圓

• 平行四邊形

這種狀況內容也會被旋轉，不符合設計要求！
解決辦法： 使用僞元素

菱形圖片：

使用強大的clip-path屬性，點對應的連線就是變換的圖形；

• 切角效果

無弧形切角

弧形切角：

顏色比較突兀，爲了明顯，有點醜哈哈！

內聯svg與border-image方案：
以後補充，
裁切路徑方案: 使用clip-path（）屬性；

• 梯形標籤頁

• 簡單的餅圖 css或者svg方法，更推薦svg方法

第四章 視覺效果

• 單側陰影 理解box-shadow的幾個參數的含義

鄰邊陰影
雙側陰影，以上陰影均利用四個值進行實現，而且能夠有多個陰影，以逗號分隔；

• 不規則陰影： 解決有箭頭，虛線邊框，或者折角的圖形陰影。

使用filter: drop-shadow() 裏面的參數和box-shadow同樣，只是沒有陰影尺寸和inset，且不能用逗號分開，filter: blur() grayscale() drop-shadow();濾鏡能夠串聯使用；

• 染色效果 （圖片的飽和度變化）

基於濾鏡的方式：filter: sepia(1) saturate(4) hue-rotate(295deg);能夠有動畫效果，
基於混合模式： mix-blendmode 能夠爲整個元素設置混合模式， background-blend-mode 能夠爲每層
背景單獨指定混合模式。 前者須要將圖片包裹在div中，向上包裹元素混合！後者須要將圖片做爲背景圖片，向下背景元素混合，且無動畫效果！
三種方法各有利弊！

• 毛玻璃效果

使用僞元素和filter屬性完成

• 折角效果

使用僞元素和漸變完成，

第五章 字體排印

• 連字符斷行 hyphens: auto;
• 插入換行： 使用僞元素的content: 'A' 和white-space:pre; 搭配使用，
• 文本行的斑馬條紋：background-size: auto 3em;

background-origin: content-box;
background-image: linear-gradient(rgba(0,0,0,.2) 50%,
transparent 0);三者結合使用，單位設置爲em，能夠使條紋寬度隨着文字大小的變化而變化

• 調整tab的寬度： 利用tab-size屬性，用於解決展現代碼或者原樣輸出
• 連字：font-variant-ligatures: common-ligatures

no-discretionary-ligatures
no-historical-ligatures; 使用此屬性解決問題

• 華麗的& 符號：@font-face {

font-family: Ampersand;
src: local('Baskerville-Italic'),
local('GoudyOldStyleT-Italic'),
local('Palatino-Italic'),
local('BookAntiqua-Italic');
unicode-range: U+26;
}
h1 {
font-family: Ampersand, Helvetica, sans-serif;
}

• 自定義下劃線：

background: linear-gradient(gray, gray) no-repeat;
background-size: 100% 1px;
background-position: 0 1.15em;
text-shadow: .05em 0 white, -.05em 0 white;
使用此方法生成下劃線

• 現實中的文字效果：
  凸版印刷效果：background: hsl(210, 13%, 60%);

color: hsl(210, 13%, 30%);
text-shadow: 0 1px 1px hsla(0,0%,100%,.8);
空心字效果： 使用svg（推薦） 或者使用text-shadow
文字外發光效果：filter: blur(） 或 text-shadow
文字凸起效果： 陰影逐漸加深，用mixin設置
環形文字： 利用svg

第六章 用戶體驗

• 選用合適的鼠標光標
• 擴大可點擊區域
• 自定義複選框
• 開關式按鈕，謹慎使用
• 經過陰影弱化背景，至關於添加蒙層，（1）使用僞元素，可是沒法捕獲點擊事件，阻止鼠標交互（2）box-shadow;box-shadow: 0 0 0 50vmax rgba(0,0,0,.8);不阻止鼠標交互，並且配合固定定位使用，或者在沒有滾動條的頁面中使用。(3)dialog::backdrop {

background: rgba(0, 0, 0, .8);
}

• 經過模糊來弱化背景：box-shadow和filter
• 滾動提示 ：使用兩層背景，控制
• 交互式的圖片對比控件：
• 範圍輸入控件方式：書中有很詳細的解答！提醒本身要回顧。

第七章 結構與佈局

• 自適應佈局 width: min-content
• 表格的自適應寬度 table {

table-layout: fixed;
width: 100%;
}

• 根據兄弟元素的數量來設置樣式： li:only-child {

/ 只有一個列表項時的樣式 /
}

• 根據兄弟元素的數量範圍來匹配元素： nth-child(2n+1)）；；n+b 這種形式的表達式能夠選中從第 b 個

開始的全部子元素。 舉例來講， :nth-child(n+4) 將會選中除了第1、 2、
三個子元素以外的全部子元素

• 滿幅的背景，定寬的內容：footer {

padding: 1em;
padding: 1em calc(50% - 450px);
background: #333;
}三行代碼解決，calc()函數的用處真多！

• 垂直居中： （1）基於絕對定位的解決方法：main {

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} transfrom基於自身的寬高進行百分比計算
（2）基於視口單位，但有限，只能使用在視口中main {
width: 18em;
padding: 1em 1.5em;
margin: 50vh auto 0;
transform: translateY(-50%);
}
（3） 基於flexBox解決方案，很推薦，body {
display: flex;
min-height: 100vh;
margin: 0;
}
main {
margin: auto;
} flex和margin： auto;結合使用，而且上下和左右都會居中；；；或者使用main {
display: flex;
align-items: center;
justify-content: center;
width: 18em;
height: 10em;
} 此中運用了justify-content屬性和align-items屬性

• 緊貼底部的頁腳 使用flex

# 第八章 過渡與動畫

• 緩動動畫

未完，兩天後會更新徹底，有些地方也比較粗略，後期再看一遍的時候進行補全！